add pause to timeline - Githubissues

ShKlinkenberg commented 2 years ago

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](https://greensock.com/docs/v3/GSAP/Timeline/addPause()).

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 commented 1 year ago

~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 :sweat_smile:. 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 commented 1 year ago

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

there exists a complete callback for an animation,
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 / anime

add pause to timeline #817