Jump to content
Search Community

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

Qamar Aziz test
Moderator Tag

Recommended Posts

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?

Link to comment
Share on other sites



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:



Hopefully this helps.

Happy Tweening!

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