Transform origin confusion

[Wayrse]

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

[GreenSock]

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? 

[Wayrse]

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

[OSUblake]

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

[GreenSock]

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. 

[Wayrse]

@OSUblake and @GreenSock thank you both for the amazing replies. Makes complete sense now