[Draggable transform origin]

Thanks!

[Draggable transform origin]

Thanks, exactly what I wanted. But I have follow-up question. I also want to rotate the menu when a user clicks smiley face and animate this rotation. However, setting transition on .home__links-container in css breaks the draggable rotation. Do you know how I can apply transition in this case? I came across this topic but I am not sure if this the same case as mine and answers are too complicated for me.

 

ps1 I won't be using ThrowPropsPlugin

ps2 I updated my codepen.

[Draggable transform origin]

Hi, I want  .home__links-container element to rotate around smiley face. To see exactly what I mean you can open codepen in Firefox or uncomment  .home__links-container styling (starts in line 22) and handleRotate function (starts in line 1) and comment out TweenLite.set (line 13).  The problem is that on Chrome the .home__links-container element that contains links is bigger than parent <svg> and the circle menu is not in the middle of .home__links-container. On Firefox however .home__links-container has (almost) the same size as parent <svg> and rotation works as expected - see screenshots https://imgur.com/a/Udzvx1D. I don't understand why Chrome doesn't calculate transformOrigin set by TweenLite correctly. Can someone help me with this? I can set Draggable rotate on parent svg but then smiley face rotates too and I want to avoid it.

See the Pen qQJJeb by kubkil (@kubkil) on CodePen