Prevent SmoothScroller from Refreshing on Image Load with Vanilla Lazy Loading

[yazo]

Hello GSAP community,

I'm currently using GSAP's SmoothScroller in my project, and I've encountered an issue where the scrolling becomes jittery and experiences small bumps whenever an image is loaded via vanilla lazy loading.

Here's a bit more detail about my setup:

• I’m using GSAP SmoothScroller to achieve smooth scrolling effects.
• Images on my page are being lazy-loaded using vanilla JavaScript.

The problem arises when I scroll through the page, and as the images load, the SmoothScroller seems to refresh, causing a noticeable interruption in the smooth scrolling experience.

My Question:

Is there a way to prevent SmoothScroller from refreshing or recalculating when images are lazy-loaded? I'm looking for a solution that allows for a seamless smooth scrolling experience without these interruptions.

[Cassie]

Hey, this sounds like an annoying one. My gut feeling would be to set the height of the images in CSS, then there isn't a layout shift when they load in? I assume this is triggering a refresh and janking the scroll briefly.

 

It would be interesting to see how you're lazy loading too though? It's possible it's a JS bottleneck from the image loading rather than ScrollTrigger doing a refresh? If you can pop together a simple demo that would be great, the I can take a proper look



 

[Rodrigo]

Hi,

 

You could use a callback after lazy loading the images and call the refresh method on the ScrollTrigger instance inside the ScrollSmoother one:

https://gsap.com/docs/v3/Plugins/ScrollSmoother/scrollTrigger

 

Something like this:

const smoother = ScrollSmoother.create({
  // ...
});

const myCallback = () => {
  smoother.scrollTrigger.refresh();
};

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

For anyone wrestling with lazy loading, I put together a helper function here that makes it a lot easier: