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: https://codepen.io/simonwilsondesign/pen/RwGrgYJ
And the same animations using GSAP: https://codepen.io/simonwilsondesign/pen/rNMxwmO
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?