Hi there, I'm using near latest npm greensock (3.11.4), and there seems to be a change in behaviour since version 2.0.1 and I'm not sure how to resolve it.
Before I could have 3 items with infinitely repeating tween inside a timeline, but later I want to stop those tweens on a delay (so they don't stop at the same time), but I don't want to pause the timeline... so I'd add my tweens to a timeline like this:
```
// start rows anim
this.spinTimeline = new TimelineLite({paused:true});
_.each(this.rows, (row, i) => {
var slideTween = new TweenMax(row.sprite, 3, {x: row.offset, ease: Power0.easeNone, repeat: -1 });
this.spinTimeline.add(slideTween , "startRowT" + i, "-=0.1");
});
this.spinTimeline.play();
```
then later I could stop them animating repeatedly by just calling a new tween on the row.sprite,
with a slightly increasing delay on each, and the animations would transition smoothly from repeating x to landing on a specific
point on the x axis.
```
stopRows() {
_.each(this.rows, (row, i) => {
TweenMax.to(row.sprite, 0.75, {x: row.offset,
ease: Elastic.easeOut,
delay: 0.75 * i,
onComplete: this.animComplete.bind(this)
});
});
}
```
Now with latest gsap versions I can't figure out how to recreate this.
the repeating tween just keeps playing after the stopping tween finishes. If I pause the timeline first, it works but the repeating anims pause immediately.. If I use overwrite: true, then the repeating anims pause immediately (not when the stop anim starts after the delay). If I use timeline.killTweensOf(row.sprite) onStart, then it happens immediately, (not after the delay).. so i can't transition from one tween to the other anymore.
My new code looks like this:
```
// start anim
const tl = this.tl;
this.rows.map((row, i) => {
const offsetX = row.container.width / 2;
tl.to(row.container, {x: offsetX, duration: 3, ease: 'none', repeat: -1});
});
tl.play();
// stop anim:
this.rows.map((row, i) => {
const toX = row.stopOffset;
gsap.to(row.container, {
duration: 1,
x: toX ,
ease: 'elastic.out',
delay: 0.75 * i,
overwrite: true, // i'd expect this overwrite to happen after the delay, not immediately.
onComplete: () => {
//this.tl.killTweensOf(row.container);
this.state = 'ready';
},
});
});
Edit:
I found the problem, I needed to remove the duration from my new version and use t.killTweensOf in the onComplete (the line i had commented!).. that works as I want now!