rotationX not behaving as expected.

[Chevex]

I'm trying to build a rotating cube animation whose sides also rotate on their respective axis. Here's what I have so far:

 

See the Pen pxtwj by Chevex (@Chevex) on CodePen

 

First I position the sides of the cube like so:

 

TweenMax.set('.front', { z: '100px' });

TweenMax.set('.back', { rotationY: 180, z: '-100px' });

TweenMax.set('.right', { rotationY: 90, x: '100px' });

TweenMax.set('.left', { rotationY: -90, x: '-100px' });

TweenMax.set('.top', { rotationX: 90, y: '-100px' });

TweenMax.set('.bottom', { rotationX: -90, y: '100px' });

 

After that I animate the front and back sides so they spin in relation to the Z axis:

 

    TweenMax.to('.front, .back', 2, { rotationZ: 360, repeat: -1, ease: Linear.easeNone });

 

Works great. Next the top and bottom on the Y axis:

 

    TweenMax.to('.top, .bottom', 2, { rotationY: 360, repeat: -1, ease: Linear.easeNone });

 

So far so good. Now the left and right sides need to rotate on the X axis:

 

    TweenMax.to('.right, .left', 2, { rotationX: 360, repeat: -1, ease: Linear.easeNone });

 

Now there is a problem. For some reason they appear to be rotating on the Z axis. I've tried rotating them on all 3 axis but they never appear to spin like a gear the way the other sides do.

 

Any ideas why this is? How can I get the left and right sides of the cube to rotate the way all the others are rotating?

[Chevex]

This article seems to explain the phenomenon, though it doesn't really help me solve the issue :/

[GreenSock]

It has to do with order of operation and it's not really a bug (things must go in a certain order, and one of the big benefits of GSAP is that it provides consistency and independent transforms), but you can definitely get the effect you're after by simply nesting the left/right in a <div>:

 

http://codepen.io/GreenSock/pen/92d8c843d78f0cd527912d7662d935d9/

[Chevex]

I ended up getting the effect I was after by moving the sides into position by "going the long way". Instead of a simple "rotationY: 90" I did a "rotationX: 90, rotationZ: 90, rotationY: 90" (which according to your documentation is applied in the order Z, Y, X). This eliminated the gimbal lock effect since the axis all traversed a different path. I like this a lot better than having to mess with the markup. Thanks for the answer though

 

Final solution:

See the Pen pxtwj by Chevex (@Chevex) on CodePen

[GreenSock]

Nice work! Thanks for sharing.