Jump to content


Timeline Tween overwrite behaviour (Solved)

Moderator Tag

Recommended Posts

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");


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});


// 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.state = 'ready';




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! 



  • Like 3
Link to comment
Share on other sites

  • hayesmaker changed the title to Timeline Tween overwrite behaviour (Solved)

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.