[ScrollTrigger Image lazy loading - more simplified]

I ended up with this. Lazy load in both directions + removing "data-src" attribute if image is loaded.

 

See the Pen BajXJYB by mrWilson123 (@mrWilson123) on CodePen

 

Thank you for your time.  

[ScrollTrigger Image lazy loading - more simplified]

1 hour ago, GreenSock said:

Did you have a specific question about it?

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

[ScrollTrigger Image lazy loading - more simplified]

This is what I have reached so far. Not sure if this is the right way.

 

See the Pen oNbKLvL by mrWilson123 (@mrWilson123) on CodePen

 

 

[ScrollTrigger Image lazy loading - more simplified]

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.

 

[ScrollTrigger Image lazy loading - more simplified]

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

[ScrollTrigger Image lazy loading - more simplified]

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.

[ScrollTrigger Image lazy loading - more simplified]

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.  

[ScrollTrigger Image lazy loading - more simplified]

Thanks, you're my superhero.   

 

8 hours ago, GreenSock said:

Actually, I'd probably simplify it even more by eliminating the data-src and using logic in the JS to build that dynamically based on the original src

 

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. 👍

[ScrollTrigger Image lazy loading - more simplified]

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.

 

 

See the Pen YzydvBE?editors=1010 by GreenSock (@GreenSock) on CodePen

[How to animate slider captions if position is fixed?]

Hi, @ZachSaucier  This is what I have reached so far: 

 

See the Pen OJMVwzd by mrWilson123 (@mrWilson123) on CodePen

[How to animate slider captions if position is fixed?]

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.

[How to animate slider captions if position is fixed?]

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.

[How to animate slider captions if position is fixed?]

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.

 

 

See the Pen gOPOOdp by mrWilson123 (@mrWilson123) on CodePen

[Moving clip-path as you move the cursor]

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.

[scrollTo - Incorrect behavior of the smooth scroll.]

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.  

[scrollTo - Incorrect behavior of the smooth scroll.]

Thanks, @Shrug ¯\_(ツ)_/¯. That's what I suspected but I wasn't quite sure. I'm trying to ask them to help. Anyway, if anyone here knows the solution then let me know. I would be very grateful.

[scrollTo - Incorrect behavior of the smooth scroll.]

Hi,

 

I'm trying to get smooth scrolling to work properly, but unfortunately I can't handle it myself (sorry, I'm pretty new of this). I'm using a scrollToPlugin and external plugin called "Smooth Scrollbar". If you look at it you will see that it is not working properly. Clicking on the link will move it chaotically. Also, if you click on the link multiple times, the page will move up and down, though it shouldn't. Hopefully someone can help me with this.

 

Thank you.

See the Pen poJraMM by Siilionu (@Siilionu) on CodePen