Draggable transform origin

[Kuba]

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

[PointC]

Please try svgOrigin:

 

TweenLite.set('.home__links-container', {svgOrigin:'250 250'});

 

More info:

https://greensock.com/gsap-1-16

 

Hopefully that helps. Happy tweening.

 

[Kuba]

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.

[PointC]

It's best not to mix CSS transitions with GSAP as it can result in a fight for control of the element. Please remove the transition on line 27 of your CSS and then you can tween the draggable back to 0 like this:

 

const addDegree = () => {
    TweenMax.to(menu, 0.5, {rotation:0});
};

 

Happy tweening.

[Kuba]

Thanks!