ScrollTriger Issue when lazy loading and animating together

[Pieter Biesemans]

I'm running into an issue with ScrollTrigger when I'm using it for both lazy loading AND scrolling animations.
Basically when I swap out the placeholder image with the actual image, the positioning gets shifted, because both images are not the same aspect-ratio. This in turn throws a spanner in ScrollTriggers work.

I want/need to keep the 'natural' height of the images. That is an important part of the design. So I don't know their height beforehand and feed that into a wrapper or something.

I also have to use the same placeholder everywhere, otherwise it would kinda defeat the purpose of a placeholder.

I'm guessing I could call ScrollTrigger.refresh(); when each image has been lazy loaded, but that seems mighty expensive when I have several dozen images on the page.

But apart from that, I'm fresh out of ideas.

See the Pen xxpRpzW?editors=1000 by pieter-biesemans (@pieter-biesemans) on CodePen

[OSUblake]

Welcome to the forums @Pieter Biesemans

 

1 hour ago, Pieter Biesemans said:

I'm guessing I could call ScrollTrigger.refresh(); when each image has been lazy loaded, but that seems mighty expensive when I have several dozen images on the page.

 

That's exactly what you need to do. There's no way around that. 😉

 

Lazy loading images and shifting the layout is going to be magnitudes more expensive than calling refresh. Don't try to pre-optimize without seeing if it's even an issue. I'm also wondering why don't just use something like background-size/object-fit: cover on the place holder so you don't have any resizes.

 

[Pieter Biesemans]

Quote

I'm also wondering why don't just use something like background-size/object-fit: cover on the place holder so you don't have any resizes.

Think of the images as paintings. They need to be laid out in a grid, so each image needs to be exactly as wide as it's cell. But no part can be cut off, it is imperative that they be shown in full. So contain (not as wide as cell) and cover (part is cut off) are both not an option.

 

Quote

That's exactly what you need to do. There's no way around that.

Yeah, that's what I was thinking. Was hoping someone here would be smarter than me, catch something I missed, and propose a magic fix 😅