Adjust start time for each element in a timeline sequence

[BruceST]

I have 3 boxes and I want to animate-in each box individually 

I created a timeline for the animation and I'm using gsap.utils.toArray to animate each box sequentially

 

However now I want the second box to start animating x duration before the first box is finished and the 3rd box x duration before the 2nd is finished etc.

Is there a way to do that with  gsap.utils.toArray ? Where and how should I adjust it?

See the Pen eYjrVdz by bruce-persaud (@bruce-persaud) on CodePen

[mvaneijgen]

Hi @BruceST,  you where already using the position parameter and with this you can also set a relative offset to a tween, eg "-=0.3" will start the animation 0.3 seconds before the previous ends. In your setup the only tricky part is that you don't want this to happen with the first item. 

 

So what I did is check if the index of your loop is not 0 and then add this offset to your tweens. Keep in mind that a default tween in GSAP (if you do not define it) is 0.5 seconds. Hope it helps and happy tweening! 

 

See the Pen abjGqqV?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[BruceST]

Awesome thank you