Infinite Image Grid with Lazy Load

[lucalopez]

Hi GSAP Community, 

I found this great project by Timothy Ricks and Jesper Landberg for creating an infinite image canvas - this project currently has a collection limit of 20 items. I was wondering if it would be possible to:
- Extend beyond the 20-item limit 
- Add lazy loading to load images dynamically
 

Is something like this feasible insight Webflow? Here's the original project link: https://webflow.com/made-in-webflow/website/Infinite-Draggable-Scrollable-Grid 

Any insights or code examples would be greatly appreciated!

 

See the Pen eYGyLrP by ReGGae (@ReGGae) on CodePen.

[GSAP Helper]

 

What have you tried already? We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools!

 

 

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[lucalopez]

Would the CodePen link that I shared from Jesper Landberg be sufficient to provide insights - if based on this I could get insights on how to add lazy load functionality, that would be super helpful - I don't need the complete code, just maybe a direction I should look into. Thank you very much!

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting or "how do I do lazy loading on this demo from another site?" tutorials. Of course anyone else is welcome to post an answer - we just want to manage expectations.  

 

Good luck on the project! 

[lucalopez]

Totally understandable. I thought that since it's a Webflow-related question, maybe you could help there or if there were perhaps already some resources/information available about this combination regarding lazy loading. I will continue looking into this topic, and if I find a solution, I will post it here.

[Cassie]

Hey! So what you're asking for here isn't a Webflow specific question or a GSAP API related question. It's really just about the logic behind this custom bit of code.

In terms of loading images dynamically, this isn't needed at all - this is a WebGL demo. The images you're seeing don't exist in the DOM. They're referenced from the DOM but they're actually rendered onto the page via a canvas element and WebGL. This is about as performant as you can get.

 

Sorry we can't help any more - Jesper is a talented guy, there's a reason he's won awwwards developer of the year many times. But his work is pretty complex and far beyond a lot of people to just tweak. There are only a few lines of GSAP code here, most of this is fragment shaders and three.js. Not really our domain of expertise.

He's a nice guy though so if you need help with it or want to learn from it, maybe pop him some questions online. 💚