[Lazy load images with multiple sources]

@ZachSaucier  Thank you for your time and efforts, i've updated my thread please take a look,

only the first image is loaded other images are ignored, i added some dummy text just to give room to scroll

[Lazy load images with multiple sources]

@ZachSaucier Hello Zach thank you so much, yea it does seems complicated for a beginner like me

how ever when i add loading lazy there is an issue with scrolling since i'm using scrollTrigger to achieve smooth scrolling for the whole website

 

just for you to remember here is the code i copied from another post on here to achieve whole page smooth transition 

JS

gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
function smoothScroll() {
  const container = document.querySelector('#_layout');
  let height;
  function setHeight() {
    height = container.clientHeight;
    document.body.style.height = `${height}px`;
  }
  ScrollTrigger.addEventListener('refreshInit', setHeight);

  gsap.to(container, {
    y: () => -(height - document.documentElement.clientHeight),
    ease: 'none',
    scrollTrigger: {
      trigger: document.body,
      start: 'top top',
      end: 'bottom bottom',
      scrub: 0.9,
      invalidateOnRefresh: true,
    },
  });
}
smoothScroll();

 

HTML

<main id="_app">
  <div id="_layout">
  	<!-- content -->
  </div>
</main>

 

CSS

#_app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#_layout {
  padding: 1.5vw;
  margin: 0 auto;
  overflow: hidden;
}

 

If the question is complicated or annoying please ignore it, 

if you just can explain to me why there is scrolling issues when i add loading lazy with this code 

 

what happens is when i scroll i can't see the  section where i added loading lazy to the images

like the scrollbar comes to and end early on like this section doesn't exist

 

thank you in advance

[Lazy load images with multiple sources]

I was checking the code pen for lazy load images from the documentation here 

See the Pen OJMaEOP by GreenSock (@GreenSock) on CodePen

I'm a beginner so bare with me, why is images have both src and data-src, shouldn't it just be data-src then it will be loaded later when it comes to viewport ?

 

also what if I'm using picture to load webp images,

do I just add dara-srcset to the source and the class and data-src to the image like so  ?

 

<picture>
   <source type="image/webp" data-srcset="example.webp">
   <source type="image/jpeg" data-srcset="example.jpg">
   <img src="example.jpg" data-src ="example.jpg" class="lazy" alt="">
 </picture>

 

See the Pen vYGYaPx by dovisally (@dovisally) on CodePen

[Animate when element comes to the view port]

so hyped now finally!, best of luck guyz, that's really great news

[Animate when element comes to the view port]

Is there is any built in functionality to animate only when an element comes to view port ?

or still i have to use something like intersection api or a third party library ?

 

and if gsap doesn't have that feature yet, is there is any plans to add it in the future ?