Rotate on parent not working as expected

[wrgt]

I've created a cube using CSS transforms and I'm trying to 'unpack' it using GSAP. If I animate the movement just using CSS it works fine, but the same transformations using GSAP work completely differently.

 

Here is the working example using just CSS animations: 

And the same animations using GSAP: 

See the Pen rNMxwmO by simonwilsondesign (@simonwilsondesign) on CodePen

 

The problem comes when the parent containers are rotated.

The below doesn't rotate the parent as expected :

 

timeline.set(".leftContainer", {
    rotationX: -25,
    rotationY: -45
});

 

And this method works initially, but when X and Y are animated to 0 the children are skewed during the transition:

 

timeline.set(".leftContainer", {
    transform: "rotateX(-25deg) rotateY(-45deg)"
});

 

I can't figure out what I'm doing wrong. Does anyone know?

See the Pen RwGrgYJ by simonwilsondesign (@simonwilsondesign) on CodePen

[ZachSaucier]

Hey wrgt and welcome to the GreenSock forums.

 

You're making one of the most common GSAP mistakes: not setting all of your transforms with GSAP on elements that you want to manipulate with GSAP. Also keep in mind that GSAP standardizes the order of transforms so instead of rotateX then rotateY like you have in your CSS, it will do rotateY then rotateX. This standardization is usually a good thing but if you want a particular order like in this case you might should use the transform property instead.

See the Pen WNGrXKq?editors=0010 by GreenSock (@GreenSock) on CodePen

[wrgt]

Hi Zach, thanks for your reply!

 

I'd tried animating the transform property on a previous test, and although the initial positioning is correct, the last animation when the left & right container are 'flattened' each side tilts inwards before ending in the correct position (unlike the CSS animated version where the centre lines are straight throughout the animation).

 

I've tried everything I can think of, and I have no idea why this is happening. Do you (or anyone else) have any ideas? Thank you

[ZachSaucier]

4 hours ago, wrgt said:

I have no idea why this is happening. Do you (or anyone else) have any ideas?

This is again because of GSAP's standardization of transform order. Since you need this particular ordering of transforms it might make more sense to animate CSS variables. That also lets you strip out the initial .set() calls:

See the Pen RwGrqdB?editors=0110 by GreenSock (@GreenSock) on CodePen

[mikel]

 

Just a practical note: Please open the right one first.

 

See the Pen MWjKLrq by mikeK (@mikeK) on CodePen

 

Happy opening ...

Mikel

 

[ZachSaucier]

3 hours ago, mikel said:

Just a practical note: Please open the right one first

Good call