Transform Rotate changes to Matrix

[ferriss]

Hi,

 

I have an issue where I can set the `transform-origin: x x` with CSS and `transform: rotate(xdeg)` and it works correctly, when moving this into GSAP it changes the transform to matrix and it doesn't transform on the correct access, it actually change the origin to `0 0`, I've I override with CSS it's still wrong but i suspect that's because of the matrix calculation.

 

Current setup:

 

```
            var rotate = gsap.timeline({
                scrollTrigger:{
                    trigger: $('.js-animation-dial'),
                    scrub: true,
                    markers: true,
                }
            })
            .to('.svg-dial__dial', {
                rotation: 360*5,
                transformOrigin: '168px 163px',
                ease: 'none',
            })
```

To note, I'm not trying to animate the transformOrigin, that needs to stay the same.

 

Thanks

 

 

[Cassie]

Hi there, 

It's hard to see without a minimal demo but I assume this is an SVG element and you're looking to use either svgOrigin: 168 163 or transformOrigin: center

See the Pen waKrNj by GreenSock (@GreenSock) on CodePen

Note - if it is SVG make sure you have any fill-box declarations removed in your CSS too

[ferriss]

Thanks @Cassie

 

Still not getting it working with either of those 2 options, please see demo here — 

See the Pen QWMbJqd by CHEWX (@CHEWX) on CodePen

[PointC]

Seems okay to me with svgOrigin.

 

See the Pen c6c91bf19db5378f18eac5c9f4ec7810 by PointC (@PointC) on CodePen

[ferriss]

I was using SVGOrigin. Oops.

[GreenSock]

6 hours ago, ferriss said:

I can set the `transform-origin: x x` with CSS and `transform: rotate(xdeg)` and it works correctly, when moving this into GSAP it changes the transform to matrix and it doesn't transform on the correct access, it actually change the origin to `0 0`, I've I override with CSS it's still wrong but i suspect that's because of the matrix calculation.

This is all very intentional - There are browser bugs and quirks that this works around. GSAP is protecting you

 

We switch the transformOrigin to 0 0 because if we don't, you'll see funky behavior in Safari, for example. Firefox also has various bugs related to transform-origin on SVG elements. We bake all the calculations into the matrix(), including the origin offsets. 👍