Shakespeare Posted January 8, 2020 Share Posted January 8, 2020 Good morning my GSAP friends, I am having difficulties understanding 3D Transforms and hope you can help me. The page I am looking to animate comprises an svg element and several buttons, which trigger different sets of animations, one of which rotates an element of the svg along the x-axis (the attached codepen is an oversimplification of my page but replicates the behavior I am experiencing). It seems to me like the "transformPerspective" and "rotationX" are being ignored. Evidently, I am missing something out but cannot figure out what it is. I very much appreciate your guidance! Thanks, See the Pen WNbMPaq by opeeff (@opeeff) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 8, 2020 Share Posted January 8, 2020 Hey Shakespeare. 3D transforms on SVG elements are not supported. You can work around it in some cases by animating the SVG itself or a container of the SVG. You can also fake it in some cases by animating other properties at times (like switching out rotateX for skewY). I suppose it'd be good to mention this in our SVG "gotchas" thread. 3 Link to comment Share on other sites More sharing options...
Shakespeare Posted January 8, 2020 Author Share Posted January 8, 2020 Hello ZachSaucier, Thanks for your prompt reply. I tested your work around on the codepen I provided and it worked. Now time to test on the real scenario 😬 !!! I will let you know how it went. Thanks again, Link to comment Share on other sites More sharing options...
GreenSock Posted January 8, 2020 Share Posted January 8, 2020 2 hours ago, ZachSaucier said: 3D transforms on SVG elements are not supported. Just to clarify, this isn't a limitation imposed by GSAP - it's just that SVG itself doesn't support 3D transforms. Some browsers have gone beyond the spec and allowed it, but it's a minority and I definitely wouldn't recommend building something that depends on 3D transforms of SVG elements. 3 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