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

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?