Jump to content


Rotate and scale translation changed

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

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.