jan.dh Posted May 29, 2021 Share Posted May 29, 2021 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 Link to comment Share on other sites More sharing options...
Cassie Posted May 29, 2021 Share Posted May 29, 2021 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 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now