Jump to content
Search Community

Snap rotation

HatakeK 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

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 


{...] 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

Link to comment
Share on other sites

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


  • Like 1
Link to comment
Share on other sites

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!

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