'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 :

  1. Update the timeline parameters.
  2. Update, replace or remove anchors.
  3. 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 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. (Pausing and deleting by not keeping any reference to the timeline is enough to dispose of it)



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