MotionPathPlugin + Draggable + React to create a Knob - Question

[p0lm0n3ys]

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

[GreenSock]

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!

 

 

[p0lm0n3ys]

Fantastic, thank you very much. 

 

[p0lm0n3ys]

Fyi, demo and repository. It's been fun 🙃,  thanks ! 

[Rodrigo]

Hi @p0lm0n3ys,

 

Thanks for reporting back and sharing your code with the community 🥳

 

Looks really good, great job!!! 👍