Restart a tween on interruption

[BradLee 5 Likes (Newbie)]

I have a button which starts an animation. What I want to do is restart the animation if the user pushes the button during an existing animation. The code below just stops the tween for a split second then continues the existing animation.

 

myTween = TweenLite.to(
      circle,
      1,
      {
        opacity: 0,
        attr: {
          r: 12,
        },
        ease: Power2.easeIn,
        onStart: reset,
        onComplete: reset,
        onOverwrite: () => 
          myTween
            .restart()
        
      }
    )

 

[Carl 9,066 Likes (Superhero)]

Hmm, not exactly sure what is going on here. It would really help though if you could provide a very simple demo showing just how you are overwriting the tween so that we can investigate further: 

 

From what you describe as the desired functionality we usually suggest you just check the isActive() state of the tween when the button is pressed. When an overwrite occurs, the overwritten tween is supposed to be killed so expecting it to restart() seems like it may be troublesome. Again, we will have a better chance offering sound advice with a reduced test case. Thanks.

[BradLee 5 Likes (Newbie)]

Codepen is below. I'm not sure how 'isActive' is supposed to work as it will return true, irrelevant of whether the tween is finished or not in this example. I tried using the function 'invalidate()' to reset values but had to remove it as it was freezing the browser.

 

See the Pen QvroPr by BradLee (@BradLee) on CodePen

 

 

[OSUblake 9,990 Likes (Superhero)]

You would use isActive as a condition to do something, like restarting the tween.

if (myTween.isActive()) {
  myTween.restart();
}

 

But that's kind of redundant if that's the only thing you want to do. Just restart it.

 

See the Pen aWGxqN by osublake (@osublake) on CodePen