ferriss Posted October 13, 2021 Share Posted October 13, 2021 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 More sharing options...
Cassie Posted October 13, 2021 Share Posted October 13, 2021 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 2 Link to comment Share on other sites More sharing options...
ferriss Posted October 13, 2021 Author Share Posted October 13, 2021 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 More sharing options...
Solution PointC Posted October 13, 2021 Solution Share Posted October 13, 2021 Seems okay to me with svgOrigin. See the Pen c6c91bf19db5378f18eac5c9f4ec7810 by PointC (@PointC) on CodePen 1 Link to comment Share on other sites More sharing options...
ferriss Posted October 13, 2021 Author Share Posted October 13, 2021 I was using SVGOrigin. Oops. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted October 13, 2021 Share Posted October 13, 2021 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. 👍 2 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now