Jump to content
Search Community

Dealing with percent animation of images

iDVB test
Moderator Tag

Recommended Posts

It appears that animation of images that are loading in at the same time creates unwanted effects.

 

https://codesandbox.io/s/funny-leftpad-g4qi8?file=/src/App.js:1346-1367

 

If you toggle commenting out/in that last line where I'm setting a hardcoded width on the image it changes the animation.

With the width is the desired animation where its centers the center of the image at the abs 25% mark of the parent div.

 

However, our images are loading just as the animation is applied and the images are responsive based on 95vh. 

 

Furthermore, in my actual case, I'm even using a 1x3px img placeholder that scales to honor and hold the aspect ratio before the image loads. 

So no idea why gsap/browser still reports the position as translate(0,0);

 

Link to comment
Share on other sites

Hey iDVB. It's kind of hard to follow what you're saying (you might try re-reading your post and correcting some English mistakes).

 

In general you're making one of the most common GSAP mistakes: not setting all of your transforms with GSAP. We also recommend using xPercent. For more info read the post here:

 

But yes, you should wait for the image to load (or set its width) before trying to use that width in an animation (like a percentage transform). That's true even if you drop GSAP.

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