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: 

 

[yazo]

On 6/18/2024 at 2:35 PM, Cassie said:

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



 

Hi Cassie,

Thanks for reaching out. Here's what I meant:

See the Pen GRbqPYr by Andrea-Serrani (@Andrea-Serrani) on CodePen.

As you can see, while the images are loading, there is a lot of bouncing in the scroll. Once all the images are loaded, this issue no longer occurs.

[Rodrigo]

Hi,

 

This happens because the height of the images is not fixed but fluid, therefore when the image element src is set, based on the dataset property, it's height is set dynamically and you can see the jump in the texts below the images. This is just the way things work in this aspect with fluid heights.

 

Maybe this demo works better for you?:

See the Pen oNrBzyJ by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps.

Happy Tweening!

[Rodrigo]

Also take a look at this one as well:

See the Pen YzydvBE by GreenSock (@GreenSock) on CodePen.

 

Happy Tweening!

[yazo]

1 hour ago, Rodrigo said:

Hi,

 

This happens because the height of the images is not fixed but fluid, therefore when the image element src is set, based on the dataset property, it's height is set dynamically and you can see the jump in the texts below the images. This is just the way things work in this aspect with fluid heights.

 

Maybe this demo works better for you?:

 

 

 

Hopefully this helps.

Happy Tweening!

Hi Rodrigo,

Thanks for taking care of this. In my solution, I have the aspect ratio set, and it doesn't look like the text jumps down (no layout shift on my browser), so the result of your solution doesn't change anything for me. (trying with last versions of chrome and safari on MacBook Pro 14'' 2021)

On your last example it works perfectly, but the problem is the number of images loaded at the same time , if i put 1 image per row it works perfectly also with my code.

Let me attach a video demonstrating the problem (your codepen used). As you can see in the video, when the page loads four or more images at a time, it starts jumping. However, once the images are cached (the images are repeated twice), the jumping stops, even if I load more images (duplicated images).
https://we.tl/t-hZPB0q7xBo

[Rodrigo]

Hi,

 

In the demo I created I updated the batchMax value to 4 (the number of elements per row in your demo), maybe that makes it better:

See the Pen oNrBzyJ by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps.

Happy Tweening!