Rotate and scale translation changed

[anotheruser]

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

[Carl]

 

 

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?

[anotheruser]

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

 

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

[Carl]

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