Jump to content
Search Community

Some issues with GSAP 3 and 3D transforms on the Z axis

mystrdat2 test
Moderator Tag

Recommended Posts

Hello,

 

I have the following issues with GSAP 3 and any help would be much appreciated:

 

1) transformOrigin doesn't accept a Z value. Setting something like transformOrigin: '50% 50% -42px' results only in transform-origin: '50% 50%' being rendered on the element. Is there a way to either fix that or make GSAP NOT render transformOrigin at all so it can be applied correctly from styles (aside using !important)?

 

2) Scale on the Z axis seems to be missing. If I animate scaleZ transform values, the animation doesn't make any changes in the DOM. scaleX and scaleY work fine.

Link to comment
Share on other sites

Actually, it's fine to set a z value in transformOrigin - GSAP simply handles that all internally and bakes it into the transform value in order to work around some browser bugs. Like in Safari, if you use a 3D transformOrigin, it breaks things in several ways. Here's a demo comparing GSAP and anime.js (look at it in Safari): 

See the Pen 8c1acc1074fa8c9e705d7cd66ff625f4 by GreenSock (@GreenSock) on CodePen

 

It's not that it's a bug in anime.js - it's a browser bug that anime.js doesn't work around, that's all. GSAP does the extra work to ensure your animations "just work" :) - that involves removing the z component from transformOrigin and adjusting the translation values accordingly. 

 

As for scaleZ, frankly I've never seen any use for it whatsoever. It isn't something GSAP supports (didn't want to waste the kb or CPU resources on something that's pretty much useless in the real world...at least from what I can tell). Can you provide a practical use case for it? 

  • Like 2
Link to comment
Share on other sites

Hello,

 

thanks for the reply. In my case, the magical transformOrigin handling seems to produce an undesired outcome and scales from wrong origin, but since it doesn't scale Z anyway I guess the point is moot. As far as the usecase, I can't directly share the client's project, but I have a grid of cube-like items that shrink on the z-axis on interaction with an origin point on the center of the backface (the cube sort of pops in and out). I guess I could show content on another face and rotate the object so I can use a different axis for the scale transform to work around the limitation. Thanks again for the insight!

  • Like 1
Link to comment
Share on other sites

  • 2 years later...

Hi,

 

Scaling in the Z  axis is just impossible not because of GSAP but because the regular box model doesn't attest for depth. So a div, section, article, h1, a, button, ul, etc. can have width and height, but they don't have depth. The only way to achieve that is to work in a 3D rendering environment such as WebGL with THREEJS for naming one.

 

What you can try is to animate the z value of an element (remember to add perspective to the parent element):

gsap.to(element, {
  duration: 2, 
  rotationX: 45, 
  scaleX: 0.8, 
  z: -300
});

You can read more about 3D transforms in the CSS Plugin docs (scroll down a bit):

https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin

 

Let us know if you have more questions.

 

Happy Tweening!

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.
×
×
  • Create New...