Nested Timelines competing?

[mr.x]

Hello, hopefully someone can shed some light on this.

 

I'm having an issue cloning a timeline that contains a nested timeline. I can make the parent and nested timelines work fine, but as soon as I clone the parent timeline, the nested child won't play anymore.

 

Say we have a function to return the parent TimelineLite, which contains a nested timeline, like this:

function build_tl() {
  var tl = new TimelineLite();
  tl.to("#box", 1.0, {x:500})
    .add(nestedTimeline);
  return tl;
}

Now we can create the parent by calling the function like this:

var parentTimeline = build_tl();

That works great. But now let's say we want a duplicate of it (not an alias, but a clone). If we add this:

var parentClone = build_tl();

Then all of a sudden the nested child timeline gets confused and won't play. 

 

Any ideas why and what a workaround might be?

 

Thanks in advance.

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

[GreenSock]

That's just because any animation can only have ONE parent. Kinda like a DOM node - it can only exist in one place in the tree structure. There are many reasons for this (I'll spare you unless you request an explanation). So basically you nested the child in one timeline, but then when you nested it in the 2nd, it removed it from the first. Everything seems to be working exactly as it should. 

 

You could accomplish your goal with a little trickery - you could create a tween of that timeline (the one you originally nested...the child), and nest that tween. Think of it kinda like an instruction set to move the playhead on that animation. So you can just create a new tween instance each time you need to nest it - they'd all control the playhead of that [formerly child] animation. 

 

Here's a fork that shows it in action: 

http://codepen.io/GreenSock/pen/bd839981e6fde80358407f7f610d0c43/

 

Notice I switched to using TimelineMax because it has a tweenFromTo() method, but you could just use TimelineLite and create a raw tween like TweenLite.to(child, child.duration(), {time:child.duration(), ease:Linear.easeNone}) and nest that. 

 

Does that clear things up? 

[mr.x]

Ah yes I see now, that makes total sense. Thank you so much Jack! I've said it before but I really love GSAP, thanks for all your hard work.