Jump to content
Search Community

Nested timelines: How to play a specific animation in a child timeline?

gloria-dee test
Moderator Tag

Recommended Posts

hi guys,  how to play a specific animation in a child timeline ?  And how to play a child timeline in the nested timelines?


As is shown in the codepen,  Box1 and Box2 each have two animations.

1、 The child1_timeline controls the Box1's animations;

2、The child2_timeline controls the Box2's animations;

3、The master_timeline controls the child1_timeline and the child2_timeline;


I hope:

Case 1、When the "play box1 anim" button is clicked,  the Box1's  all animations will play.

Case 2、When the "play box2 anim" button is clicked,  the second animation of Box2's animations will play.

Case 3、When the "play all animations" button is clicked,   all the animations of Box1 and Box 2 will play.


Now case 3 is ok, but case 1 and case2 don't work. 


In nested timelines, how to play a specific animation in a child timeline?  And how to play a child timeline  instead of the master timeline?


Hope for your help.





See the Pen BaJayrg by gloria-dee (@gloria-dee) on CodePen

Link to comment
Share on other sites

  • gloria-dee changed the title to Nested timelines: How to play a specific animation in a child timeline?

I've created functions of all your timelines so that I can call them when ever and add them to other timelines. I've removed the if statement in each click handler, because I couldn't understand what they did.


The only issue I have right now is that if the animation is still rotating and you click the button again it will keep rotating and not reset it self


See the Pen LYeYpjN?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

nice work @mvaneijgen

The reason the rotation would continue is because the timelines that were playing when you clicked the buttons again were still playing.

In other words there were multiple concurrent timelines affecting the same boxes.


I went ahead and created global references to the timelines when they are created child1, child2 and then I kill() them before assigning the new animations to them


See the Pen ZEvEQjB?editors=0010 by snorkltv (@snorkltv) on CodePen


Thanks so much for helping out around here!


@gloria-dee this seems to work, but frankly I would do my best to avoid situations like this. I would reserve master timelines with nested timelines solely for situations where you have a long linear navigation where you desire global play, pause, reverse, or scrub controls.


Once you start needing independent control of child timelines or tweens it can get pretty messy as you are basically expecting timelines to do things that kind of break the logic of what they were intended to do.


Child timelines render based on where they are relative to the parent timeline's playhead position. As the parent's playhead advances the child timeline's playhead stays locked in place with the parent's so that everything renders as it should at the right time.


Imagine a timeline has a child tween that starts at a time of 1 and is 2 seconds long, making it end at timeline.time(3)


[--parent timeline --]

----- 1 -----  2 -----  3

----- <child tween >


Both timeline and child tween end at time(3)


When the parent timeline is at a time(3) it knows the child tween should render at its end time(2)

If you monkey with the child tween and try to restart() it you set its playhead back to a time(0) which is at the parent's time(1)... but the parent's playhead hasn't moved. The parent can only render child animations based on where it's own playhead is.


Once you start trying to control child timelines and tweens independently you get into a situation where you need to understand smoothChildTiming which keeps the playheads all aligned by moving the child aniamation's startTime(). It is admittedly quite a bit to wrap one's head around. Don't feel bad if you don't understand it. My explanation above could probably use some work.






  • Like 3
  • Thanks 1
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...