Wrapping timelines into TimelineMax

[lnx 0 Likes (Newbie)]

Hi!

 

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

 

tl.add(t1).add(t2).add(t3).add(t4).add(t5);

 

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.

 

...
master.add(tl);
master.add(t1);
master.add(t2);

 

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?

 

Thanks!

 

Codepen here: 

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

 

[Sahil 2,541 Likes (Superhero)]

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.

 

 

 

 

[GreenSock 8,117 Likes (Superhero)]

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.