Make element go to end or start of timeline if retriggered

[dubfonik]

If you click the trigger and let the animation play completely there is no problem. However, if you click it again before the animation ends the element gets "stuck" at the point it was retriggered from. This is even more apparent if you click the trigger multiple times fast

 

What would be the best way to fix this?

See the Pen NWRbvXE by joelklease (@joelklease) on CodePen

[akapowl]

 

Hey @dubfonik

 

What you experience, happens because on click you create new tweens on that same element over and over again.

 

Instead, you should create a tween beforehand, store it in a variable, and on click only control the (play-)state of that tween.

 

To make it restart from 0 everytime you click, you could use .play(0) or .restart().

 

See the Pen b1d31f3782d49e3bb7721eb21c6cca74 by akapowl (@akapowl) on CodePen

 

 

Cheers, Paul.

 

[dubfonik]

That makes perfect sense now! Thanks a lot @akapowl