Jump to content


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

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

Thats a clever solution! Thanks Carl!


Only issue that I'm running in is that when the box is not square then it speeds up on quick rollover/off:

See the Pen pJBKYv?editors=011 by treemok (@treemok) on CodePen


I thought "overwrite:"none" means that it won't overwrite the current rotation tween until it's done?

Link to comment
Share on other sites

You can prevent it from running again by checking if it's active.

var tween;
function btnHandler(e)
  if (tween && tween.isActive()) return;
  tween = TweenMax.to("#thing", 2, {rotation: rotation-=360});

See the Pen GJLBZz?editors=011 by osublake (@osublake) on CodePen

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