'Animejs - Update or dispose off an existing timeline
I'm trying to create a timeline UI with animejs, creating a timeline is fairly easy and straightforward, the problem is how to :
- Update the timeline parameters.
- Update, replace or remove anchors.
- If I can't get the above, how to completely dispose of the old timeline in order to replace it with a new one.
Example animation timeline :
const timeline = anime.timeline({
targets: 'div',
loop: true,
delay: 500,
})
//anchor 1
.add({
translateY: 50,
translateX : 250,
scale: 1.5,
background: '#00ffff',
duration: 1000
})
//anchor 2
.add({
translateY: 100,
translateX : 0,
scale: 1,
background: '#800080',
duration: 1000
})
//anchor 3
.add({
translateY: 0,
background: '#ed143d',
duration: 1000
})
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>
<div style="width:100px;height:100px;border-radius:100%;background: #ed143d"></div>
seek, reverse, pause and play are the only controls I have over the timeline, I can access the anchors with timeline.children, but I don't know how to properly update or remove them or if it is even possible.
What I tried :
timeline.children.splice(0, 1)some weird behavior.timeline.remove(timeline.children[0])remove is not a function.timeline.pause();Object.keys(timeline).forEach(key => delete timeline[key])to dispose of the timeline throw a script error
For now I'm creating a new timeline after each update, but I can't completely dispose of the old timelines even with (Pausing and deleting by not keeping any reference to the timeline is enough to dispose of it)delete timeline, all I can do is pausing them, not ideal for memory management and garbage collection, beside all the requestanimationframe running in the background.
Solution 1:[1]
Just a wild guess but: timeline.children.remove(0) ? or timeline.children.splice(1,0)
I was looking for the same thing, disposal of the created anime-objects
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Holger Thiebosch |
