Share Posted May 10, 2016 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
Share Posted May 10, 2016 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. 3 Link to post Share on other sites
Share Posted May 10, 2016 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 4 Link to post Share on other sites
