Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Anitainment

+=className Rotation Direction

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.

 

Henry

 

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

Link to post
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 post
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 post
Share on other sites

Hello Jack

I just wanted to add that GSAP is doing an exellent job with the +-className stuff. Much better than it sounds in your reply. In my opinion it's a killer feature!

  • Like 1
Link to post
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.

×