On click tweenTo label -> cancel current Tween

[caplod 1 Likes (Newbie)]

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

[akapowl 5,494 Likes (Superhero)]

 

Hey @caplod

 

I stumbled upon this question on GitHub

https://github.com/greensock/GSAP/issues/357

 

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.

Paul

 

[ZachSaucier 7,162 Likes (Superhero)]

I'd just animate the progress directly:

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

[GreenSock 18,878 Likes (Superhero)]

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. 

[caplod 1 Likes (Newbie)]

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!