Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Asderex

Can we modify a perspective function for an element (as opposed to the perspective property on an elements parent)

Recommended Posts

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

Hey Asderex, I think you're looking for the transformPerspective property in GSAP :) 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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

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.

 

 

  • Like 2
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Excellent! Happy to help. Enjoy. 👍

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×