Jump to content
Search Community

Nested Paused Timeline or Tween instances don't play in parent timeline

pr1ntr 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

That behavior is by design. We do our best to honor the intentions of the developer and make as few assumptions as possible. So if you pause a timeline, we figure you mean for it to be paused until you unpause it. And yes it might suit your situation right now to have it unpause automatically for a very good reason, but this isn't the type of thing we can just change as it would take far too many people by surprise. 


Keep in mind you can unpause your tweens or timelines as you add() them

  • Like 4
Link to comment
Share on other sites

I totally understand the reasoning behind not "assuming" things. I have to stop myself from that all the time. But just for fun, here is my use case. So I have an animation in which is comprised of 4-5 distinct timelines that control what happens in some sequence. The sequence of these timelines varies upon the "in" or "out" of the total animation. so if the animation is going out I have to rearrange these timelines. What I tried to do initially is create all timelines in a paused state  and assign them to vars of some object that is in charge of managing them. Then every time I want to animate in, I create a new timeline and add those tweens to it in a particular order. When I want them to animate out I add them to another tween in reverse an then reverse that timeline. What I had expected is as soon as I added them to another tween they would inherit that tweens paused state. Since the parent tween is ultimately in charge of playback of its children it seemed rational that it would override whatever paused state they had. What I had resolved to do was just remake each timeline every time I wanted to animate in an an out. I guess I don't feel terribly comfortable with constantly instantiating tweens, but I have gotten over it for the most part as I am assured that the tweens GC very well. The profiler also confirms this. I figured it may be easier to manage the same instance of the tweens. Thanks for your input guys.

Link to comment
Share on other sites

  • 2 years later...

Hi @icdindia,


I don't see anything wrong with your pen. You have several .addPause() in your child timeline. As soon as GSAP hits the .addPause() in your first child timeline it pauses the animation.


I would suggest you make your own thread if you feel you want to discuss your issues a bit further rather than make this thread longer. We will be happy to help/explain.


Happy tweening!

Link to comment
Share on other sites



Actually I was talking about the same issue. I have nested timelines to smoothen out the workflow. 


The addPauses are added so people can read the content on the different slides.


Now I am not able to play the nested timelines using a single function so the user can just tap on the screen and go from one page to the last.


Please suggest how can I can use pause in nested timelines and still play them again on click function .



Link to comment
Share on other sites

Well, once again it is proven that if you sleep, @OSUblake shall come haunt your dreams and snatch your posts away.


Great job, sir. :)


The issue with the clicking anywhere else might stem from the fact that CodePen is adding an extra hover area and click button on the embedded pen. It probably won't exist in the real life scenario.

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...