Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Kuba

Draggable transform origin

Recommended Posts

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

Link to comment
Share on other sites

Please try svgOrigin:

 

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

 

More info:

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

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 4
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×