Jump to content
GreenSock

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

Rotate and scale translation changed

Recommended Posts

Hi , I am trying to scale/reveal a rotated image from top, but when i try to do that the position changes! Is there anything i am doing wrong ?

 

To Animate in codepen , please click the image

See the Pen jpNBGX?editors=1010 by jeffin417 (@jeffin417) on CodePen

Link to comment
Share on other sites

 

 

Thanks for the demo.

 

Unfortunately I do not see the position changing (or any noticeable jumps) when I click on the image. It stays rotated and positioned the exact same way it was when the page loaded.

 

 

Testing in Chrome on Mac. Is there a particular OS / Browser combo that this jump occurs with?

Link to comment
Share on other sites

Sorry , I was testing something else using the same codepen , can you please check now ?

 

See the Pen jpNBGX by jeffin417 (@jeffin417) on CodePen

Link to comment
Share on other sites

You already have a transform on that element so when you change the transform origin, it changes how those transforms are applied and you get a visual shift.

 

Notice what happens in this demo without any GSAP when the transform origin changes: 

 

See the Pen qyWPRV?editors=1010 by GreenSock (@GreenSock) on CodePen

 

One suggestion would be to do your initial rotation with transform origin of "0 0" already set and use translateX, translateY to position it where it should be.

 

Another option is to rotate the outer div as you are but apply the scale only to the image

 

See the Pen oMvGod by GreenSock (@GreenSock) on CodePen

 

  • Like 4
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.
×