[Snap rotation]

Found a decent solution I think -- I wrongly presumed that the tween

TweenMax.to('id', 1, {rotation: 360, repeat: -1}) 

would continue to increase the rotation beyond 360. Since it doesn't, I can simply do this on mouseleave:

TweenMax.to('id', 0.5, {rotation: 0})

 

Thanks anyway

 

PS -- I'm absolutely in love with GSAP!!

 

See the Pen MoJxpW?editors=1010 by HatakeK (@HatakeK) on CodePen

 

[Snap rotation]

I'm rotating an svg on mouseenter, and currently just reversing the rotation with .reverse(1) on mouseleave. What I'd like to do on mouseleave is to tween the rotation counter-clockwise back to the starting point -- i.e. rotation % 360 == 0. E.g. if rotation is 780 when mouseleave, it should rotate back to 720.

 

I couldn't find a way to do this "natively", so I tried getting the current rotation of the svg when mouseleave event fires, but I can't seem to get this value. I read in the SVG-tips that 

Quote

{...] The same goes for any transforms - if you rotate or move or whatever in CSS, Chrome reports it as scale:1, rotation:0, translate:0, etc. So when GSAP asks the browser for the current value, it'll get bogus data.

 

 

Is there another way to get the current rotation or a simpler way to do this rotation snap?

 

See the Pen awpQZm?editors=1010 by HatakeK (@HatakeK) on CodePen