Jump to content


Restart a tween on interruption

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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(
        opacity: 0,
        attr: {
          r: 12,
        ease: Power2.easeIn,
        onStart: reset,
        onComplete: reset,
        onOverwrite: () => 


Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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



Link to comment
Share on other sites

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

if (myTween.isActive()) {


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




  • Like 3
Link to comment
Share on other sites

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.