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

[Chris]

Hi,

 

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

[Carl]

 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"});
}

 

http://codepen.io/GreenSock/pen/gpyKBd?editors=011

 

 

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

[Chris]

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?

[OSUblake]

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