How do I force GSAP to stop using transform: matrix()?

[marquizzo]

I have 2 identical <svg> hearts.

• The left heart scales up via CSS transform from translateX(2px) scale(0); to translateX(2px) scale(1);
• The right heart scales up via GSAP from {x: 20, scale: 0} to {x: 20, scale: 1}

 

As you can see in the CodePen demo below, the left CSS heart grows smoothly to the center of the container, but the right GSAP heart goes haywire and flies almost entirely off-screen because it uses a transform matrix of matrix(1, 0, 0, 1, 20, -19.977) with a y-value of -19.97?. Additionally, it overrides my transform-origin to 0px 0px 0px. The transform origin was initially set via CSS to `8px 20px` so it's at the bottom tip of each heart, so why try to override it?

 

 

There are probably many workarounds to fix this, but can I simply tell GSAP to stop using transform matrix(), and not override my transform-origins? I just want a simple tween from translateX(2px) scale(0); to translateX(2px) scale(1); without anything fancy under the hood.

See the Pen GRxWPGE by marquizzo (@marquizzo) on CodePen

[GreenSock]

Thanks for the minimal demo! Super clear. 🙌

 

It's always best to set your transform-related values through GSAP because: 

1. It works around browser bugs and inconsistencies
2. It ensures accuracy (the browser reports existing transforms as a matrix which is inherently ambiguous when parsing rotational data, like scaleX: -1, scaleY: -1 is identical to rotation: 180 but GSAP caches things and tracks each component independently for perfect accuracy)
3. It improves performance (again, caching so that it doesn't need to parse the values every time). 

The reason it sets transform-origin to 0 is to work around Firefox and Safari browser bugs - it actually embeds the origin data directly into the matrix() itself to produce consistent results across all browsers. 

 

And it uses matrix values in the transform attribute (rather than CSS) to work around other browser bugs. For example, Safari had bugs related to CSS-based transforms in some scenarios. The attribute-based ones are most consistent. And matrices are fastest to render in most cases.

 

So GSAP is actually protecting you in all this stuff

 

You were setting values in CSS which was contaminating things. And your order of operation on the transform string was non-standard. 

 

Here's a fork of your demo, showing that if you set things properly through GSAP it all works nicely across all browsers and it delivers consistent order-of-operation too: 

See the Pen GRxWbqa?editors=0010 by GreenSock (@GreenSock) on CodePen

 

To answer your direct question, there is no way to tell GSAP to stop using matrix on SVG transforms. It's sorta like saying "can you tell GSAP to implement transforms in ways that are proven to be buggy and error-prone?" 

 

Does that help?