Snap rotation

[HatakeK]

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

[HatakeK]

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

 

[GreenSock]

Glad you found a solution.

 

By the way, are you familiar with what DirectionalRotationPlugin offers? https://greensock.com/docs/#/HTML5/GSAP/Plugins/DirectionalRotationPlugin/

 

It's actually baked into CSSPlugin too, so you should be able to just say rotation:"0_ccw" if you want it to rotate back to 0 in the counter-clockwise direction. Just an option

 

Have fun!