p0lm0n3ys Posted April 16, 2023 Share Posted April 16, 2023 Codesandbox here. I've been able to build this thanks to some threads on the forum, new to gsap... I think the issue is easier to explain playing with the demo than with words, the goal is to avoid the outer blue circle to rotate the way it does. I've been playing with different values for `transformOrigin` but no luck. What am I missing ? TIA Link to comment Share on other sites More sharing options...
Solution GreenSock Posted April 16, 2023 Solution Share Posted April 16, 2023 Yeah, that's because you set the transformOrigin incorrectly - the bounding box of the group includes all the stuff in it, so the center is offset due to the stuff leaking outside the circle. You can just set the exact coordinates with svgOrigin: https://codesandbox.io/s/modest-lewin-mbeyi5?file=/src/Knob.tsx Also, it's a good idea to get in the habit of using gsap.context() for easy cleanup in React. Please read this: Happy dragging! 2 Link to comment Share on other sites More sharing options...
p0lm0n3ys Posted April 16, 2023 Author Share Posted April 16, 2023 Fantastic, thank you very much. Link to comment Share on other sites More sharing options...
p0lm0n3ys Posted May 21, 2023 Author Share Posted May 21, 2023 Fyi, demo and repository. It's been fun 🙃, thanks ! 1 Link to comment Share on other sites More sharing options...
Rodrigo Posted May 22, 2023 Share Posted May 22, 2023 Hi @p0lm0n3ys, Thanks for reporting back and sharing your code with the community 🥳 Looks really good, great job!!! 👍 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