Jump to content


GSAP doesn´t work with 3 values on trasnformOrigin

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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 comment
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 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.