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

[skyslide 0 Likes (Newbie)]

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})
    .add(tl1)
    .add(tl2)
    .add(tl3)

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

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

 

[Carl 11,048 Likes (Superhero)]

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 

 

 

[skyslide 0 Likes (Newbie)]

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