TransformOrigin on SVG element doesn't apply as expected

[Charlene]

Hello,
I'm new to GSAP and have a problem when I want to animate an SVG element. My SVG is transformed via CSS to get the desired design (maybe it's not already a good starting point?) and I'd like to animate its rotate property. To do this, my transformOrigin must be the center of my SVG, as specified in the stylesheet and as it's normally the default value from GSAP, but GSAP animation seems to interpret it in a different way.

If I look at my element with devTools, I see that the transformOrigin is '0 0 0', whereas I've set it to '100px 100px 100px'. What's the matter here?

Thanks in advance to shed some lights on this

See the Pen XWONZRg by charlene-bx (@charlene-bx) on CodePen

[GreenSock]

Is this what you were trying to do?: 

See the Pen ExrNpPe?editors=0110 by GreenSock (@GreenSock) on CodePen

 

The problem is that when you try to control transforms and transform-origin via CSS for SVG elements, it's a mess browser-wise. They handle them differently. That's one of the reasons it's almost always best to just manage them through GSAP because it'll always behave the same in every browser and it'll perform better.

 

The reason you're seeing transform-origin: 0px 0px when using GSAP is because GSAP merges that data into the transform matrix itself in order to harmonize browser behavior. In other words, when you set it via CSS, it an look different in various browsers, so GSAP protects you from that by always setting transform-origin to 0 and then doing all the magic in the matrix() itself, so it behaves like the origin is where it's supposed to be, but it's simply merged into the matrix. 

 

Does that clear things up? 

[Charlene]

Thanks a lot,

Indeed, that was why i'm trying to do and now, I understand why it doesn't work as expected!

🙏