Jump to content
Search Community

Weird behavior with TweenMax.to()

cyrnm 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

Hi,

 

I'm currently developing a circular form that's spinnable using the Draggable (wheel) plugin for TweenMax. When you click and hold the wheel in the pen, you can drag it around so it rotates using "transform: matrix3d(...)" - that part works great!

 

However, I want to create a function where, once I click an inactive card, the wheel rotates so that the clicked card is on top. The calculation for that one is done and works perfect - but not for the dark blue card. If you have any card active, then click on the blue one, the transform will skew, rotate and translate the element. If you have the blue card active and click on another card, the same happens. However, if you have any other card than the blue one active and click on any other card but the blue one, it works perfectly.

 

I would appreciate any pointers happily, as I'm quiet running out of ideas. 

 

Best regards and thank you in advance!

See the Pen BPZVoR by cyrnm (@cyrnm) on CodePen

Link to comment
Share on other sites

Don't animate transform as it will undo the matrix. Hint, a matrix does rotation using scale and skew, which explains the weird behavior.

 

TweenMax.to('#wheel', 1, {
  rotation: rotateDeg 
});

 

But I don't know if that is the correct behavior. You can rotate something more than 360 degrees... and it can be negative. You might want to look at the DirectionalRotationPlugin, which is baked into the CSSPlugin.

https://greensock.com/docs/Plugins/DirectionalRotationPlugin

 

This will rotate it the shortest distance.

 

TweenMax.to('#wheel', 1, {
  rotation: rotateDeg + "_short"
});

 

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