Timeline Tween overwrite behaviour (Solved)

[hayesmaker 5 Likes (Newbie)]

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!