Jump to content
Search Community

How start playing TimeLine from another TimeLine?

berikiushi 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

please tell me how start playing TimeLine from another TimeLine, for example:


var tl1 = new TimelineMax({paused:true});
tl1.append( TweenMax.to($('.bg'), 2.2, {css:{autoAlpha:1, scale:1}, ease:Power2.easeOut}) );
// here need start playing tl2
tl1.append( TweenMax.to($('.logo'), 1, {css:{right:"+=89", autoAlpha:1}}) );

var tl2 = new TimelineMax({paused:true});
tl1.append( TweenMax.to($('.frame'), 1.5, {css:{left:+=100}, ease:Power2.easeIn}) );
tl1.append( TweenMax.to($('.bullet'), 1, {css:{top:"+=120", autoAlpha:1}}) );


Link to comment
Share on other sites

You can append() a timeline to another timeline very easily. I'll show you how in a moment...


I assume you have been using GSAP for a while, since before 1.8.0 was released, right? Good news: you can actually omit the css:{} wrappers now (if you want) and there's a new, more concise "add()" timeline method that could make your code even more concise. Plus, the new TweenLite.selector functionality means that if you have jQuery loaded, you can even pass in selector text directly as the target of your tweens and it'll automatically feed it to jQuery to find the target(s). Plus there are convenience methods like to() on the timeline classes, so there's a lot we can do to make your code even more concise.


I noticed a few problems with your code too, like you didn't wrap "+=100" in quotes and it looks like you never populated tl2 with anything, so I assume you meant to use tl2 for the last 2 tweens instead of tl1 - is that right? If so, here's how your new code could look:


//define tl2 first so that we can reference it later when we want to add() it to tl1
var tl2 = new TimelineMax();
tl2.to('.frame', 1.5, {left:"+=100", ease:Power2.easeIn});
tl2.to('.bullet', 1, {top:"+=120", autoAlpha:1});

var tl1 = new TimelineMax({paused:true});
tl1.to('.bg', 2.2, {autoAlpha:1, scale:1, ease:Power2.easeOut});
tl1.to('.logo', 1, {right:"+=89", autoAlpha:1});

Also notice that I did NOT pause tl2 because we're nesting it into tl1 which is already paused. That way, we won't have to unpause them both. Remember, if the virtual playhead isn't moving in tl1, it won't move across tl2 either since that's the child. 


GSAP honors paused states, so if you had paused tl2 and it's inside tl1, and then you unpaused tl1, tl2 would still be paused (thus it wouldn't play). I know that might sound a little confusing, but if you think through it, you'll see that it kinda makes sense why that should be the case. 


Let me know if that clarifies things for you. 

Link to comment
Share on other sites

  • 1 year later...



I have a similar problem only in my case I need to be able to control child Timelines individually so I need them to be set as paused.


See the Pen JCrBi by skmasq (@skmasq) on CodePen


as  you can see it jerks the reverse animation, I think it's because I'm passing `.play()` function to `.add()`.




See the Pen jyJHh by skmasq (@skmasq) on CodePen

 where I set `pause: false` and remove `.play()` and just leave the instance. But it still jerks the animation.




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