GSAP: Trying to stagger Tweens in Timeline

Question

I am trying to play each Tween within my timeline with a certain offset.

This is how I init my timeline:

const tl = new TimelineLite({
  onComplete: playReverse,
  onReverseComplete: play,
  stagger: 5
});

Later I add my tweens to the timeline, passing an array to the .add() method.

tl.add(tweensForTl);

When the timeline plays, all tweens start at the same time... Any suggestions or ideas?

Answer 1

It's tough to tell from the limited code you posted, but you may be able to use one of the stagger methods like staggerTo() whose 4th parameter is the "stagger" amount (a number, in seconds, between the start times). That might be the most concise way.

But to strictly answer your question, you could do:

tl.add(tweensForTl[0]); //add the first one at the end (no delay)
for (var i = 1; i < tweensForTl.length; i++) {
    tl.add(tweensForTl[i], "+=5"); //add a 5 second delay before the start of each subsequent one
}

If you haven't seen this already, it might be helpful: http://greensock.com/position-parameter