Asderex Posted June 1, 2020 Share Posted June 1, 2020 Hi, I have some elements undergoing a z axis transform but I need them to maintain their own perspective (using the perspective function on the transform as opposed to using the perspective property of their parent element). When I perform a vanilla z axis animation GSAP will add something like the following style tag: style="transform: translate3d(0px, 0px, 200px)" I was thinking maybe there might be something I could do with the modifier plugin but this seems to allow modifying values before they are concatenated into a templated style update. Does anyone know how I could include a perspective function in the transform. e.g. style="transform: perspective(90px) translate3d(0px, 0px, 200px)" The Mozilla docs use a perspective function in their translate3d reference so it should be valid. I'm just not sure how I can get GSAP to include this modifier. Any thoughts good people of the Greensocks forum? Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 2, 2020 Share Posted June 2, 2020 Hey Asderex, I think you're looking for the transformPerspective property in GSAP 2 1 Link to comment Share on other sites More sharing options...
Asderex Posted June 2, 2020 Author Share Posted June 2, 2020 47 minutes ago, ZachSaucier said: Hey Asderex, I think you're looking for the transformPerspective property in GSAP Ding Ding Ding! We have a winner! - Thanks Zach, thats exactly what I was after. I'm not sure how close you are to the development of GSAP but I had a quick play in codePen and noticed that rather than adding a perspective function to the transform it rolls it all up into a matrix3d operation. Do you know if this done for performance reasons? Link to comment Share on other sites More sharing options...
GreenSock Posted June 2, 2020 Share Posted June 2, 2020 1 minute ago, Asderex said: I had a quick play in codePen and noticed that rather than adding a perspective function to the transform it rolls it all up into a matrix3d operation. Do you know if this done for performance reasons? You must be using an old version (2.x?) The new GSAP 3 handles things differently. I'd certainly recommend updating. More concise/modern syntax, smaller file size, and way more powerful. 2 Link to comment Share on other sites More sharing options...
Asderex Posted June 2, 2020 Author Share Posted June 2, 2020 Right you are. I forked a simple codepen and after updating the GSAP reference I can now see the expected perspective function in the transform. Thanks for the tip. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted June 2, 2020 Share Posted June 2, 2020 Excellent! Happy to help. Enjoy. 👍 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