Jump to content
Search Community

Wrapping timelines into TimelineMax

lnx 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



Here is my issue. I have an animation with a TimelineLite. This TimelineLite contains others nested timelines. Basically the main one is just




So here is my problem now. I want to play either of theses timelines through a global one. Depending of the button click, I'll add one of theses timelines.




At the beginning, when I play the master with main one, it works well and the WHOLE animations is played, as soon as I play one of the nested timeline alone, and I play the master one again, the nested ones I played are removed and don't occurs in the whole animation anymore.


Just to remind you:


  • tl: main
  • tX: nested timelines
  • master: timeline containing either of the timelines above


I assume as soon as you add a timeline into another one, the reference to this one into the main one is removed, is it right?


How to deal with that?




Codepen here: 

See the Pen NzWqpy by anon (@anon) on CodePen


Link to comment
Share on other sites

A tween or timeline can only have one parent.


The only solution I can think of is to use functions to create your timelines so you can create multiple copies, but be careful while using from tweens.





  • Like 2
Link to comment
Share on other sites

Yep, @Sahil is right about animations (tweens or timelines) only having one parent. Just like DOM nodes, an object can't exist in two places at a time in the hierarchy. 


However, you can get tricky if you really want to by creating tweens of another animation's time or progress! For example:

var tl = new TimelineMax({paused:true});
t1.add(tl.tweenFromTo(0, tl.duration()) );
t2.add(tl.tweenFromTo(0, tl.duration()) );


All that tweenFromTo() does is create a TweenLite with a linear ease that animates the "time" property of that timeline, like:

TweenLite.to(timeline, timeline.duration(), {time:timeline.duration(), ease:Linear.easeNone});


In other words, you're tweening the playhead of another animation!


So in this case the tween of the timeline is what's getting nested. Just beware that if you're creating a bunch of tweens that are all controlling a specific timeline's playhead, you'll want to make sure they're not running at the same time or they'll fight with each other or get overwritten. 


Docs: https://greensock.com/docs/TimelineMax/tweenFromTo()


I'd strongly endorse Sahil's suggestion to watch those videos and read https://css-tricks.com/writing-smarter-animation-code/. That'll likely help you more than the technique I mention above. 

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