mrWilson

I ended up with this. Lazy load in both directions + removing "data-src" attribute if image is loaded. https://codepen.io/mrWilson123/pen/BajXJYB Thank you for your time.

How to get rid of data-src when an image is loaded. I can't handle it myself. Sorry.

This is what I have reached so far. Not sure if this is the right way. https://codepen.io/mrWilson123/pen/oNbKLvL

Yes, your last example seems to be working now. Thank you. Would you do the same with your first (without dynamically builds the URL) example? And one more thing. It would be nice if the "data-src" will be removed when the image is loaded.

Unfortunately, this doesn't work when scrolling up. It loads full size images instantly.

Thank you, @GreenSock. Sorry for the late reply. Yes, that's what I was looking for. Both of your examples are awesome, but I found something I didn't notice before. Both samples work perfectly when the page is scrolled down. Unfortunately, lazy load does not work in both directions- when you refresh the page and scroll up.

Your solution above is perfect for me. But another version you mentioned (where it dynamically builds the URL) would be nice too, if you don't mind. Just to understand how these things work.

Thanks, you're my superhero. That would be nice. I think many others also will find it useful. Different solutions are always welcome, it helps to better understand and learn. Thank you again. 👍

Hi, I have a question about the ScrollTrigger Image lazy loading. The demo sample uses HTML markup like this: <section class="preloadSection"> <div class="deferredImageContainer"> <img class="deferredImage" width="1200" height="600" src="https://picsum.photos/id/237/20/10" data-src="https://picsum.photos/id/237/1200/600"> </div> </section> Is it possible to do this much simplified? As follows: <img class="lazy" src="https://picsum.photos/id/237/20/10" data-src="https://picsum.photos/id/237/1200/600"> Thanks.

Hi, @ZachSaucier This is what I have reached so far: https://codepen.io/mrWilson123/pen/OJMVwzd

Thank you for reply, @ZachSaucier I understand how GSAP works, but unfortunately, that doesn't help me further. Building the whole thing with GSAP is not an option for me.

Hi, PointC It's because i don't know how to animate titles with gsap in this particular situation. I was hoping someone could help me with that.

Hi, I'm using Swiper slider, and I've created fixed position captions for it. I don't want them to move with the slide as usual, so I lifted captions out of the slide. I got it to work, but I'm having trouble animating them. I don't know how to do it. For example: if the slide changes then the previous slide titles fade out + slide up, and the next slide titles fade in + slide up. Thank you.

Hi, I found cool image movement effect on this site: https://www.davidebaratta.com/ (it seems to use GSAP). If you hover on the image then the clip-path will move as you move the cursor. I also noticed a magnetic effect in it. I wonder how it is done. Does anyone know how to do this? Thanks.

Thank you for the answer @ZachSaucier Uhh.. Right now it sounds like rocket science to me. Unfortunately, I have no clue how to do it.