Charlene Posted November 4, 2023 Share Posted November 4, 2023 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 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted November 5, 2023 Solution Share Posted November 5, 2023 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? 1 Link to comment Share on other sites More sharing options...
Charlene Posted November 6, 2023 Author Share Posted November 6, 2023 Thanks a lot, Indeed, that was why i'm trying to do and now, I understand why it doesn't work as expected! 🙏 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