Jump to content
Search Community

Nested timelines and calling reverse on paused timeline

electrichead test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm moving this into a new topic from a reply in another topic. I've created a codepen: http://cdpn.io/tlmGg


The issue is that (starting from fresh page), clicking "+" to play the timeline one or more times and then clicking "-" to reverse it doesn't reverse the timeline immediately. The onReverseComplete is called right away without anything being done. You have to press "-" again causes it to do the desired thing. After doing that a few times (or once), clicking the opposite direction ("+") again triggers the onComplete without actually playing.


Any ideas as to why it remains paused when "changing play directions" (i.e. from "play" to "reverse" or vice versa)? Does it immediately fire the onComplete/onReverseComplete when you change directions? If so, is this intentional behaviour?

Link to comment
Share on other sites



I can't look at your codepen right now, but from the previous post I presume that this has to do with an issue of how the ticker works in this cases.


Luckily there's a way to solve it, the addPause method.


Check this codepen I created before:


See the Pen jrfEi by rhernando (@rhernando) on CodePen


In the codepen info you'll find a link to the docs and a better explanation of the issue.




  • Like 1
Link to comment
Share on other sites

Yeah, Rodrigo is on the right path. 


addPause() is definitely a good solution here.


The problem with using callbacks to pause a timeline is that there is always going to be an eensy weensy amount of time that transpires between when the callback gets called and its code executes. 


Lets say your first nested timeline has a duration of 1 second and it has an onComplete that calls tl.pause(). tl.pause() may not actually execute until a time of 1.001 seconds. So what is happening is that your main timeline is pausing .001 seconds into the start of the second nested timeline. When you call reverse the main timeline reverses for that overlap of .001 seconds and then the second nested timelines onReverseComplete fires. 


It might take awhile to sink in. Hopefully the explanation helps.


If you use the addPause() after you add() each nested timeline you don't have to worry about these pause() calls drifting.


Check out this pen:



I removed the this.tl.pause() inside your onComplete and onReveseComplete callbacks and simply add the addPause() method to every newTl insertion.


Also, thanks a ton for creating the codepen example. It was a huge help.

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...