CSS animation vs Timeline - translate3d issue

[jan.dh]

I'm trying to convert a css animation to a timeline. When you move these 2 lines out of the comments:

 

animation: sw 5s linear;
animation-fill-mode: forwards;

 

you can see the animation I'm trying to convert. However, when you put those lines back in comment and see the timeline animation (which animates the same properties) the animation is different.  Next step is to add a scrollTrigger and to add the fadeOut animation. It seems that gsap always tries to animate the Z property of the transform3d, however, it's set to 0. Also tried 1px, using z instead of translateZ, but it always keeps on giving the same result.

See the Pen oNZGrKE by jan-dh (@jan-dh) on CodePen

[Cassie]

Heya. If you take out all references to z GSAP won't animate the z value

See the Pen rNyYNMB by GreenSock (@GreenSock) on CodePen

Also, a few notes on your setup. Preserve 3d and perspective belong on the parent - they're setting the 3D space up - then you'll want to animate the child within that. Hope this codepen helps!

See the Pen gOmGVQO by GreenSock (@GreenSock) on CodePen

One of the reasons I think you may not be getting the result you're expecting is because CSS transforms stack and the order effects the result.

See the Pen 36700c92aaafb432ebe2efb69d26d7a8 by amit_sheen (@amit_sheen) on CodePen