Can I create a timeline that stays paused until I explicitly play it?

[pragdave]

My animations run inside a player, and I have multiple players running different animations on a page.

To date (with GSAP) I've been loading each into its own timeline, and then letting the user control when they run with the player controls. The benefit of prerunning the animations is that the user can scrub back and forth without running them.

It seems like every time something is added to an SVG.JS timeline, that timeline is started. Which means that my player controls are ineffective.

Is there anyway of telling a timeline not to run until I tell it to?

If not, would you accept a PR that gave timelines three states (playing, paused, and stopped), where "paused" means currently stopped, but will start if a runner is added, and "stopped" means it needs an explicit play()?

Cheers

Dave

[Fuzzyma]

The reason the timeline starts playing is because usually you want to animate an element right away when you call animate(). However, you can always stop/reset/pause a timeline and resume it later. So thsese states actually exist already. I am not entirely sure right now at which point the timeline starts playing. You can try pause().

Here is an example which shows a few features of the timeline: https://codepen.io/fuzzyma/pen/wQbVed

[pragdave]

Ah, I spent the weekend playing, and worked out that I can do exactly what you say by having multiple timelines. The main timeline, which actually represents time into the simulation, and be paused at the start, after I load it with the initial animations, but before my code returns to the main event loop. I then create extra timelines which manage all the eye-candy animations, and they run independently. When t's time to kick things off, I just play that main timeline.

[Fuzzyma]

Wow - I really wanna see what you are building there!