Jump to content
GreenSock

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

GSAP doesn´t work with 3 values on trasnformOrigin

Recommended Posts

In the first lines of JS i´m doing:
 

TweenMax.set(".big-flipper",  {
       transformOrigin:"75px 0px -37.5px",
});

Gsap is not applying the z value, when i inspect the element with google Dev tools the z value always becomes "0" no matter what value i use:
        transformOrigin:"75px 0px 0px",


.... cheers

See the Pen QNYXPr?editors=0110 by caemostajo (@caemostajo) on CodePen

Link to post
Share on other sites

Hi caemostajo,

 

Yes, I can confirm that if you inspect the element, you will see "0px" in the "element.style" but that is not causing GSAP's transformOrigin not to work. If I change the values in the code, I can clearly see the ".big-flipper" rotating from a different pivot point.

 

I think it's just your calculations that are getting a bit confused as you are trying to use a mix of percentage and pixel based values. By default, your pen starts with a white background and the ".big-flipper" is not rotating around the correct point in relation to the cube. If I change the size of the window, eventually, the background turns gray and the ".big-flipper" starts to rotate around the correct pivot point. 

  • Like 3
Link to post
Share on other sites

Yes, GSAP actually manages the z part of the transformOrigin internally in order to work around a bug in Safari. It's very intentional. But like Dipscom said, it doesn't actually change the way things look - GSAP adjusts the matrix() or matrix3d() values to accommodate the z part of the transformOrigin. If we didn't do it this way, some versions of Safari simply wouldn't animate/render correctly. Again, that was a browser bug that's unrelated to GSAP - we just figured out a way to protect you from it :) 

  • Like 4
Link to post
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.

×