Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ferriss

Transform Rotate changes to Matrix

Go to solution Solved by PointC,

Recommended Posts

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

 

 

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

I was using SVGOrigin. Oops.

  • Like 1
Link to comment
Share on other sites

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. 👍

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×