Jump to content


How to chain timelines with masterTl.add(tl1).add(tl2)...

Recommended Posts

How can i chain timelines which waits for the last one to finish?

Do i have to calculate manually the length of the last timeline added with tl.add(tl1) (tl1.duration())?

I would like to play the added timelines as "chained clips", same behavior as tl.to() or tl.from(), but for timelines, not individual animations.


const tl1 = getMy10sAnimation1() //gsap.timeline() ...to().to().to()...
const tl2 = getMy2sAnimation1()  //gsap.timeline()
const tl3 = getMy7sAnimation1()  //gsap.timeline()

const masterTl = gsap.timeline({repeat: -1})

// expected result:
// -----------
//            --
//              ---------
// repeat

// but i get:
// -----------
// --
// -------


Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


Without seeing all your code, my guess is that the functions like getMy10sAnimation1() are not returning the animations as shown in the demo below. Your functions are probably just creating the animations as soon as being called. You could log masterTl.duration() for further investigation.




See the Pen jOYxVpm??editors=1010 by snorkltv (@snorkltv) on CodePen


If you need more help please provide a minimal demo 



  • Like 4
Link to comment
Share on other sites

i thought just the callback which provides the animation would be enough, but the tl reference itself needs to be passed to tl.add(tl, not () => tl), works now thank you

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.