Jump to content


On click tweenTo label -> cancel current Tween

Moderator Tag

Recommended Posts

If I click on Pos2 and before the animation finishes, on Pos1 again,  the animation starts moving backwards to Pos1

But in the end it has some wierd behaviour, ending sometimes on Pos2 ?


How can I fix this?

See the Pen PoNpdvy by caplod (@caplod) on CodePen

Link to comment
Share on other sites


Hey @caplod


I stumbled upon this question on GitHub



and found, that if you remove the duration from the tweens in your tl and add a duration on the .tweenTOs in your click-function instead, it resolves what you are experiencing.


See the Pen 2fa2caab0bea7eae233cb6440097105b by akapowl (@akapowl) on CodePen


Also, check on what @GreenSock (jackdoyle over on Github had to say on that question there)

I am also pretty sure, there might be another even better way for solving, what you are experiencing.


Cheers for now.



  • Like 3
Link to comment
Share on other sites

When you do a timeline.tweenTo(), that's just creating a linear tween that automatically sets its duration to the amount between the current playhead position and the destination. So, in your example, let's walk through what happens...

  1. Click "Pos2", and it starts a 2-second tween (because that's how far it is to that position).
  2. 0.5 seconds later, click "Pos1" which now creates a 0.5-second tween back to the start (because that's how far it is)
  3. Now you've got TWO tweens created, both vying for control of the playhead. The 0.5-second one "wins" while it's running because it runs last (since it was created last)
  4. The 0.5-second tween to the start finishes first.
  5. The 2-second tween still has 1 second left to play so it keeps going. The position suddenly jumps from "Pos1" to part-way to "Pos2" (because that's where that second tween was in its progression). 

Make sense? That should also explain why @akapowl's solution worked. That was essentially hiding the problem because the tweens were always the same duration, thus the "new" one always runs longer than the "old" one (therefore no jump).


There are a bunch of solutions. Perhaps the easiest is to just have the new tweenTo() tweens overwrite the old ones so you don't have multiple going at the same time. Here's an example of that: 

See the Pen 8e4fd7788a7b9b84664236ef155577a2?editors=0010 by GreenSock (@GreenSock) on CodePen


Of course you could directly animation the progress like Zach showed. 


In the next release, I'll force the overwrite of .tweenTo() tweens to be "auto" because that's more intuitive and would resolve this anyway. 

  • Like 3
Link to comment
Share on other sites

Thank you all for your great solutions.

@GreenSock Your in depth explanation really helped me better understand the whole process. And your solution worked perfectly!

  • Thanks 1
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.