Jump to content
Search Community

+=className Rotation Direction

Anitainment 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

Hello Everybody

I'm experimenting with tweening CSS classes containing 3d transforms. It works very well in most cases but I’m stuck with the getting rotations into the right direction.


I wish the “DirectionalRotationPlugin” would help me out here. But I wouldn’t like to set the target values via JavaScript.


Please click the door in my pen to see what I mean and check the CSS class “.open”. Maybe it is a pure CSS problem.


Any advice is very welcome.




See the Pen jwKEdy by Anitainment (@Anitainment) on CodePen

Link to comment
Share on other sites

Hello Mikel

Thanks for your reply. Your example is really efficient and the result looks exactly as I wished.

However, my intention was to solve it with the "className"-feature. This would be very elegant in some cases. It still could be working with some CSS changes even if the door suddenly has to be a ball or whatever.

Nevertheless thanks a lot for your effort.

Link to comment
Share on other sites

For the record, I'd generally avoid className stuff if you can - it's just less efficient. A className tween must look through every property and figure out which ones change and then set those in motion whereas a regular tween specifies exactly which things should change and skips the overhead of that parsing/analyzing. 

  • Like 4
Link to comment
Share on other sites

  • 1 month later...

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