Timeline positions in loop

[Torrfura]

I find my self doing this all the time, because if I set startTime to a predefined value on all .add(), it will already render the first couple of items as played. There must be a better way to make all tweens / timelines, in a master timeline, to overlap each other, except the first (since there is no tween before that to overlap)?

The codepen illustrates my question

 

let tl = gsap.timeline(),
    startTime = 0;

this.items.forEach((item) => {
  let animation = item.spin(); // Returns a gsap.timeline
  tl.add(spinAnimation, '-=' + startTime);
  startTime = spinAnimation.duration() * 0.8;
});

 

See the Pen a35ee4a71a345d0973099f78aca9ea6f?editors=1111 by joseelsantos (@joseelsantos) on CodePen

[ZachSaucier]

Hey Torrfura, 

 

It looks like your pen's code doesn't match the code that you posted. Perhaps you accidentally updated it? Also the code you posted has an error in it I believe (spinAnimation not being defined).

 

Anyway, if all of the timelines have the same duration then it's easy: just calculate the offset initially and then use the same one every time, like '-=2.4' in this case.

 

But given you're asking about this, I'm guessing that they each have a different duration. Your approach in the code sample is good if you fix the error in it. Is there something wrong with it?

[OSUblake]

If i or the index is 0, it's the first one.

 

let tl = gsap.timeline();
for (var i = 0; i < items.length; i++) {
  
  var startTime = i ? "<.5" : 0;
  
  tl.add(getTween(items[i]), startTime)
};