[FEATURE] Add pause to timeline

[ShKlinkenberg]

I'm trying to create an animation timeline that pauses after each animation. So I can create an animation progress button to go to the next animation in the timeline. This is very useful for teaching purposes.

I would like to see the ability to add a pause in the timeline tl.addPause();, just like GSAP has implemented this.

Other ways to seek the timeline and have the animation pause at specified times are very cumbersome.

This would be a great addition. Or maybe this is already possible and I'm just not able to find it.

Thanks for the awesome library. I especially appreciate the MIT license as opposed to GSAP with their paid plugins.

[gmile]

I'm coming from svg.js, which has seeing/pausing/resuming for timelines too. I wish anime.js would have those capabilities too.

I retract my original comment 😅. There's a way to do everything I've mentioned, including pausing the timeline.

timeline.play();
timeline.pause();
timeline.restart();
timeline.seek(timeStamp);

It's all seen on this page: https://animejs.com/documentation/#TLcontrols.

[gmile]

@ShKlinkenberg I tried implementing what you are asking based on these two facts:

1. there exists a complete callback for an animation,
2. all animations inherit timeline parameters.

let myTimeline;

myTimeline = anime.timeline({
  complete: function(_animation) {
    myTimeline.pause()
  }
});

However, after testing this doesn't seem to work as expected, e.g. pause after every animation within the timeline. Not sure what I may be missing atm.

[juliangarnier]

Sorry for the wait, v4 doesn't have a .addPause() method but added a .call() method on timeline and can be used to trigger a pause on the timeline itself like this:

createTimeline()
  .add('.square.red', { y: -100 })
  .call(self => self.pause()) // pause the timeline
  .add('.square.green', { y: -100 })

Check out the new documentation and the migration guide from v3.

I'm closing this for now, but feel free to re-open if this is still an issue for you in v4 by following the contributing guidelines.

Thanks!

[juliangarnier]

I made a little demo here https://codepen.io/juliangarnier/pen/RNNwvNj

[juliangarnier]

Actually reopening this, .call(self => self.pause()) mostly works, but since the call happens during playback, it's likely to pause one frame off.
So it needs to be handled differently internally and have the timeline adjust its currentTime when a pause callback is triggered.
Not sure if I'll work on this right away since the workaround of using call can be enough in most cases, but this cold be nice to have at some point.