Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Fast clic element rortate error position

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

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






Link to comment
Share on other sites

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:



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.



  • Like 6
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.