How do I nest a Greensock timeline in multiple Greensock timelines?

Question

I'm trying to have a timeline be part of multiple timelines in greensock. I guess the what I need to happen is one element needs to animate in both cases but only on or the other needs to animate in each case.

Heres what I have so far

var tl1 = new TimelineMax()
tl1.to(document.getElementById("one"), 0.5, { x: 10 })

var tl2 = new TimelineMax({ paused: true })

tl2.add(tl1)
tl2.to(document.getElementById("two"), 0.5, { x: 10 })

var tl3 = new TimelineMax({ paused: true })

tl3.add(tl1)
tl3.to(document.getElementById("three"), 0.5, { x: 10 })

tl2.play()

#one, #two, #three {
  width: 10px;
  height: 10px;
}

#one {
  background-color: hsl(0,70%,50%);
}
#two {
  background-color: hsl(100,70%,50%);
}
#three {
  background-color: hsl(200,70%,50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>

Maybe there is a better way to achieve this...

Thanks in advance

Answer 1

There are many ways to accomplish this, but let me first point out a few things:

1. An animation (tween or timeline) can only have one parent. Think of it like a DOM node in that sense. So you cannot add() tl1 to both tl2 and tl3. When you add() it to one, it'll be removed from the other.
2. The paused state of a timeline is honored even when it's nested inside another. For example, if you pause tl2, then put it into tl3 and then tl3.play(), you won't see tl2 play because it's still paused.
3. You can just pass in selector text as the target, and GSAP will use document.querySelectorAll() if jQuery isn't loaded. So instead of document.getElementById("one"), you can just use "#one" (though it's perfectly fine to do it the other way too).
4. You don't have to initially pause your timelines and then call play() immediately - they won't render until the next "tick" anyway so it's wasteful to pause and then play on the same tick. It's not "wrong" and it won't change how anything looks - it's just extra unnecessary code.

If your goal is to have #one animate from x:0 to x:10 in both timelines, you don't have to create nested timelines and try to re-use things. Instead, you can just drop a simple fromTo() tween into both. Like:

tl2.fromTo("#one", 0.5, {x:0}, {x:10})
   .fromTo("#two", 0.5, {x:0}, {x:10});
tl3.fromTo("#one", 0.5, {x:0}, {x:10})
   .fromTo("#three", 0.5, {x:0}, {x:10});

If you do want to use timelines and nesting, you could still do it in a tricky way - you could create tl1 (the one you want to re-use) as initially paused, and then use the tweenFromTo() method to basically animate its playhead from both timelines. tweenFromTo() simply spits back a tween that controls the playhead, thus you can nest that tween inside another timeline (and create multiple tweens that are doing that same thing). Like:

tl2.add(tl1.tweenFromTo(0, tl1.duration()));
tl3.add(tl1.tweenFromTo(0, tl1.duration()));

Does that help?