Lazy load effect on all sections or cards in websites

[ceescoenen]

Hi, 

 

What is the best way to make lazy-load effects on all sections and cards? When the section is coming in to the x% of the viewport. The question is more how to program this is a proper way. Give all the sections the same name? Or are there better solutions? 

[Cassie]

Hey @ceescoenen 

 

We try to keep these forums focused on GSAP-specific questions and this is more focused on JS logic.

There are lots of different approaches to lazy loading - it's hard to tell what to advise without seeing your markup or an example of what you're trying to achieve. My favourite way to approach coding is to first focus on making it work and then optimise if necessary. If you try to work out the best solution before attempting it you'll often just overthink things, at least, I know I do.

I imagine you'll need to loop around your sections and yes, that will likely be easier if you have classes on those sections.

[ceescoenen]

Hi @Cassie, thanks for your answer. 

 

Sorry to say, but it feel that I have to search to another platform to ask question about use cases. I thought I could ask on experience what I can archive with GSAP. There a so much possibilities that I sometimes search for a correct way to implementatie things. If it is possible to do make a codepen then I do, I will do. I have to learn a lot and I have paid for Creative Code Hub. So I do my best to learn. But I hope you understand that helping  people on the right road is also fine. But I think that is not how this forum works (?). 

[Cassie]

I don't really understand what you're saying in that last message @ceescoenen - sorry.

Here's an example, maybe it will help?

 

But obviously it depends hugely on what you're trying to achieve, where you're loading the images from and what your setup looks like.