Images shifting the scrolltrigger start position if there is no eager loads.

[Qamar Aziz]

When working with images in GSAP, I've noticed that on the initial load, the start position gets shifted if we don't set the image to eager: loads or given a specific height to it.

However, I have been setting all my images to eager: loads instead of a lazy load, so it instantly downloads images at once, and the start position doesn't shift. But this increases the initial load of the page. 

 

Sometimes aspect ratio works and then I don't need to set images to eager: loads, lazy load works fine and sometimes setting the aspect ratio doesn't work.

Is there a way we can maintain the scrolltrigger start position?

[Rodrigo]

Hi,

 

Yeah that's just the way things work in browsers. You have two options, use a very small src for the image with a fix width/height and then load the large image:

See the Pen OJMaEOP by GreenSock (@GreenSock) on CodePen

 

The other option, similar to that demo is to track the loading state of each image and when a new image is loaded, call ScrollTrigger.refresh() in order to update the ScrollTrigger instances based on the new height. For this approach you can use this simple but useful tool:

https://imagesloaded.desandro.com/

 

Hopefully this helps.

Happy Tweening!