Jump to content
Search Community

Scale animation interferes with position of element

Severino test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

I have this absolutely positioned image on my website:

img {
position: absolute;
transform: translate(50%, -50%);
right: 0%;
top: 50%;
width: 625px;
z-index: 20;



The animation is just `

.from(torta, {duration: 1, scale: 2, ease: 'bounce'})


When the page loads it randomly animates to its intended position but more often than not it animates to a wrong position on the screen.

You can see the problem live on tortecas.com

What causes this and how can I fix it?

Link to comment
Share on other sites

  • Solution

It's very difficult to troubleshoot blind - do you have a minimal demo you can share?


Seems to work perfectly for me: 

See the Pen 070e6f537fbf4a387afb03746b807a9f?editors=0010 by GreenSock (@GreenSock) on CodePen


I wonder if you're animating it before the image has loaded, thus it doesn't have a "height" yet because you didn't define one in the CSS. I'd recommend either waiting for the image to load or set a height in the CSS or both. 

  • Like 1
  • Thanks 1
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.
  • Create New...