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

[pr1ntr 3 Likes (Newbie)]

I discovered today (unless im doing it wrong) that my paused tweens and timlines don't play when added to a timeline. They need to be manually unpaused. Is this a desired effect? Would you guys be open to implementing a switch? Thanks.

[Diaco 1,999 Likes (Superhero)]

Hi pr1ntr 

 

yep , when you have tweens/timelines as another Timeline childs , they'll handle by parent timeline and don't need to paused childs .

[Carl 11,326 Likes (Superhero)]

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

timeline.add(nestedTimeline.play())

[Rodrigo 5,906 Likes (Superhero)]

In order to add to this discussion, I always considered a best practice to control the paused status of an instance residing in a timeline, through it's parent timeline, that is if you want to pause, pause the parent instance. You can use the addPause() method for that:

 

http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/addPause/

[pr1ntr 3 Likes (Newbie)]

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.

[icdindia 9 Likes (Newbie)]

Hi,

 

I have the same issue.

 

Following is my codepen. Please suggest the best way out.

See the Pen gWoqMP?editors=0010 by vikrant-icd (@vikrant-icd) on CodePen

 

[Dipscom 3,376 Likes (Superhero)]

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!

[icdindia 9 Likes (Newbie)]

Hi,

 

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 .

 

Thanks

[OSUblake 18,538 Likes (Superhero)]

Keep track of the current timeline.

 

See the Pen oWEEXJ?editors=0010 by osublake (@osublake) on CodePen

 

 

[icdindia 9 Likes (Newbie)]

Hi,

 

Thanks. This is exactly something that I was looking for.

 

But the next button stops working if you click anywhere else on the screen.

 

Any suggestions?

[OSUblake 18,538 Likes (Superhero)]

Don't know. That's weird. But that was just a temp solution because I didn't know what next was. If you go back to using next for fullscreen, the issue goes away.

[Dipscom 3,376 Likes (Superhero)]

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.