Severino Posted February 26, 2021 Share Posted February 26, 2021 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 More sharing options...
Solution GreenSock Posted February 26, 2021 Solution Share Posted February 26, 2021 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. 1 1 Link to comment Share on other sites More sharing options...
Severino Posted February 26, 2021 Author Share Posted February 26, 2021 I tried using `window.onload` before animating but didn't solve it. Using a fixed height value was the solution. Thanks a lot! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now