Jump to content


Strange behavior when adding timelines to another timeline

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

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

Link to comment
Share on other sites

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


  • Like 4
  • Thanks 1
Link to comment
Share on other sites

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

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