Jump to content
Search Community

rotate an object 360º on mouse-over (without overwriting a current rotation)

Chris test
Moderator Tag

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



Please see my (first!) Codepen: I'm trying to rotate an object 360º on mouse-over. I want it to always stop at the top again (at the start position) - even when I mouse over several times very quickly. But it overwrites the current tween and then stops somewhere else.


In Flash I was able to just say  

TweenNano.to(evt.target, 1, {rotation:-360}); 

but that only works once in JS. I tried to add "overwrite:"none" to no effect.


Any ideas?

See the Pen LVvreW by treemok (@treemok) on CodePen

Link to comment
Share on other sites

 Yeah, your code would create a new tween each time you rollover that subtracted 360 from the current rotation. So if you did the quick roll over / off thing you might rollover when the rotation was - 300, and if you subtract 360 from that, well you get -660.


A neat way of making sure that you only tween to 360 degree increments is to store the rotation value in a variable like


document.getElementById("thing").addEventListener('mouseover', btnHandler, false);
var rotation = 0;
function btnHandler(e)
  TweenMax.to("#thing", 1, {rotation:rotation-=360, overwrite:"none"});





This way you aren't tweening to a value relative to the current rotation of the object you are rolling over.

  • Like 3
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.
  • Create New...