Draggable TransformOrigin Isn't working in React

[blumaa@gmail.com 18 Likes (Newbie)]

Can someone help me figure out how to change the transformOrigin in this react component? Right now the moon is spinning from the upper left and I'd like to have it draggable spin from the center.

 

https://codesandbox.io/s/amazing-poitras-fe5uw?fontsize=14&hidenavigation=1&theme=dark

 

Thank you!

[Karliky 11 Likes (Newbie)]

I would say that you need to set transformOrigin to center center

 

transformOrigin: "center center" 

 

But that doesn't make it work 🙃

 

EDIT:

Ok, I think this is what you want, it spins from the center of the wrapper. Just take a look to the position relative/absolute I added https://codesandbox.io/s/beautiful-ptolemy-mtmeq?fontsize=14&hidenavigation=1&theme=dark

[blumaa@gmail.com 18 Likes (Newbie)]

Hi! Thank you! This is sort of a fix for it. I don't understand why it was necessary to wrap the svg with divs and use the styling to position it though. Why can't I just transformOrigin on the group inside the div?

[blumaa@gmail.com 18 Likes (Newbie)]

Here's a codepen example where I got it working by using the id on the svg tag. Why can't I rotate a group within an svg? That is my big question.

 

Also, when I try to change it to transformOrigin: "bottom right", it doesn't change the location of rotation.

See the Pen LYprPWq?editors=1010 by blumaa (@blumaa) on CodePen

[ZachSaucier 7,048 Likes (Superhero)]

@blumaa@gmail.com You can't set CSS properties like transformOrigin in the .create() method. You should use gsap.set() instead  

See the Pen 89a23bdbafa8475256e95b3f3b989a7f?editors=0010 by GreenSock (@GreenSock) on CodePen

[blumaa@gmail.com 18 Likes (Newbie)]

That was it! And it was such an easy fix. I can't believe it! Thank you.