Fast clic element rortate error position

[lisartur]

This is my example

If you click the number 1 key, my red element will rotate to 90 degrees and the next 180 degrees, and then to 270 degrees, etc.

If I press the 1 button, everything is ok, but if I press the 1 key very quickly several times my red element adopts different positions of rotation

How to make it take the correct positions regardless of the speed at which the key is clicked

 

 

See the Pen zWpYom by lisartur (@lisartur) on CodePen

 

 

 

 

 

[PointC]

Hi @lisartur

 

I'm not sure if you meant preventing additional clicks during the active tween or you wanted it to count each click and continue? If it's the former, I'd add an isTweening() check like this:

 

See the Pen oqpgPw by PointC (@PointC) on CodePen

More info:

https://greensock.com/docs/TweenMax/static.isTweening()

 

If it's the latter, I'd probably just increment/decrement a rotation variable and feed that into the tween.  That way if you click 10 times, you'd end up at -900 degrees. Maybe something like this:

See the Pen mxpyQL by PointC (@PointC) on CodePen

Hopefully that helps. Happy tweening.