Wayrse Posted November 17, 2019 Share Posted November 17, 2019 Hey all, How come the following happens when you try to rotate a shape with a transform origin of center center in the following ways: - If the transform origin is set in gsap, the rotation works as expected, the shape rotates from the center of itself - When you set the transform origin to center center in CSS instead, the shape rotates around a strange value Any ideas as to why the transform origin acts differently when set in these 2 different ways? See the Pen c58a0b50e094996e70dcdb47c74b59c0 by MarioD (@MarioD) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted November 17, 2019 Share Posted November 17, 2019 Ah yes, that's because in order to work around browser bugs and inconsistencies (especially with transform-origin), it bakes those values directly into the matrix() that it applies to the transform attribute itself. So in your case, you ALSO had a transform-origin applied via CSS which was throwing off the matrix values. In the next release, I can add code to force the CSS style to transformOrigin: "0px 0px" to eliminate the edge case you ran into. It's already done in this preview: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js Better? 3 Link to comment Share on other sites More sharing options...
Wayrse Posted November 18, 2019 Author Share Posted November 18, 2019 Hey Jack, Thanks again for taking the time to answer my question. I really have to learn to ask the questions correctly what I meant to ask is: So the 2 cases are: 1. We don't set a transform origin in CSS, but we set a transform origin in gsap -- outcome, item rotates around the center, what's expected 2. We don't set a transform origin in gsap, but we set a transform origin in css -- outcome, item does not rotate around the center, not what's expected Does the CSS transform origin act differently than when setting it through gsap? Thanks Link to comment Share on other sites More sharing options...
OSUblake Posted November 18, 2019 Share Posted November 18, 2019 1 hour ago, Wayrse said: 2. We don't set a transform origin in gsap, but we set a transform origin in css -- outcome, item does not rotate around the center, not what's expected Transform origin doesn't always work the same for SVG elements, so gsap normalizes it. https://css-tricks.com/svg-animation-on-css-transforms/#article-header-id-1 See the Pen dVwaZG by sdras (@sdras) on CodePen 4 Link to comment Share on other sites More sharing options...
GreenSock Posted November 18, 2019 Share Posted November 18, 2019 Yep, @OSUblake is exactly right - this is why we always recommend setting all your transform-related stuff through GSAP, as it smooths out browser bugs and inconsistencies (especially with transforms). It's okay if you set things in CSS (to avoid an initial flash before JS executes) as long as you also do so via GSAP, like with agsap.set() call initially. Another example of why this is useful: browsers report computed transform values as a matrix() or matrix3d() which is always pixel-based, thus if you do any percentage-based values in your CSS (or other units), it's impossible for GSAP (or any JS) to discern in any practical fashion. The same goes for rotational data - a matrix/matrix3d for 0 degrees is identical to 360 degrees, and 720, etc. Everything gets convoluted and impossible to decipher perfectly. But if you set things through GSAP, it records it in a cache that keeps all the data intact, so there's no ambiguity about rotational data or units or whatever. Crispy clean and delicious. I hope that helps. 3 Link to comment Share on other sites More sharing options...
Wayrse Posted November 19, 2019 Author Share Posted November 19, 2019 @OSUblake and @GreenSock thank you both for the amazing replies. Makes complete sense now 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now