Jump to content
Search Community

Nesting TimelineLite multiple times doesn't work?

mr.x test
Moderator Tag

Go to solution Solved by GreenSock,

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

It seems that one of the advantages of nesting Timelines is so you can re-use an animation, but if I try to .add() or .append() a nested timeline twice, the first one is ignored and only the last one animates.


I forked Carl's "Use .add() to Nest Timelines" codepen (thanks Carl, you rock) and simply repeated one of the .add() lines, changing the JS from:

var masterTimeline = new TimelineLite();


var masterTimeline = new TimelineLite();
  .add(box2Timeline) // this won't animate when there's a duplicate below
  .add(box2Timeline); // comment this out and the earlier one will animate

But apparently if you repeat any nested timeline .add(), the first instance will no longer animate, only the last one will.


Also I noticed that the parent timeline does wait for the duration of the nested timeline as if everything's running fine, which makes me think it's some kind of rendering or overwrite issue. 


I'd love to understand what the problem is so I can figure out a solution or a workaround. Thanks!



See the Pen MaRoJB by xgraves (@xgraves) on CodePen

Link to comment
Share on other sites

  • Solution

Yep, that's very much by design. An instance can only exist at one place at a time. You can't put the same timeline at 2 different times on a parent timeline because...well, how would it report its "startTime()" (which refers to the time at which it starts on its parent timeline)? See what I mean? And what if you asked it to report its time()? It's logically impossible. Just like you can't be in two places at the same time, neither can a timeline (or tween) instance. :)


To accomplish what you're after, you have at least 2 options:


1) Just create a duplicate timeline instance. For example, create a box1Timeline() function that builds and spits back a timeline instance, and just call that function twice, placing the result accordingly in your master. 


2) [Fancy option:] Keep the child timeline separate (don't actually put it into the master). Pause it. Then, create multiple tweens of that timeline's playhead! Kinda like:

var child = new TimelineMax();
child.to(....); //create whatever tweens you want inside it

master.add( child.tweenFromTo(0, child.duration()) );
master.add( child.tweenFromTo(0, child.duration()) );

Keep in mind that TimelineMax's tweenFromTo() method just spits back a TweenLite instance that tweens the playhead with a linear ease. That's it - you could manually create it if you prefer. It's just easier with that method, that's all. 


Does that help?

  • Like 4
Link to comment
Share on other sites

Awesome, thank you so much Jack! And thanks for everything, GSAP is the best. 


So if I understand correctly, when you .add() a nested timeline it doesn't actually copy the tweens into the parent timeline, but rather just points to that timeline.

Link to comment
Share on other sites

Exactly, it doesn't "copy" anything - it just says "here's a new child...put it onto the timeline at ____ time". When the parent timeline renders, it triggers the child to render accordingly (at the appropriate time). Like when the playhead moves on the parent, it also moves the child's playhead so they're always matched up. 

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