Strange behavior when adding timelines to another timeline

[bruno-vaz]

Hi, I'm developing an website and I'm trying to separate a big animation into smaller timelines, but I'm getting a strange behavior when using tl.add().
I recreated it on Codepen in a simpler manner than in my website.
On Codepen I have 3 boxes, each with it's own TimelineLite instance, and then I have the variable tl, and I added the first 2 timelines in it.
What happens is:

1. If I try to play the tl timeline, with the first two boxes, nothing happens.
2. If I try to play the tl1 and/or tl2 timelines separately, is jumps around or start tweening near the end of the timeline.
3. If I try to play the tl timeline after playing tl1 and tl2, it works fine.

 

The third box wasn't added to the tl timeline to use as reference of an animation playing without problems if not added to another timeline.

What am I doing wrong? It's probably a silly error I'm missing, but I can't seem to understand why this is happening.

See the Pen QxyvrE by bruno-vaz (@bruno-vaz) on CodePen

[Sahil]

That is happening because your child timelines are paused so when you add them into the parent timeline, parent timeline starts playing but tweens remain paused. That's why when you click on 'play 1 and 2' nothing happens.

 

When you click on 'play 1' and 'play 2' they jump because your parent timeline is complete and playhead of child timelines is tied to parent timeline. I doubt you can play child timelines independently, though you can tween them.

 

See the Pen PaZEMX?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[bruno-vaz]

I undestand, I applied your example to my project and it worked as expected.
Thanks!