rami essam

@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

@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

I was checking the code pen for lazy load images from the documentation here https://codepen.io/GreenSock/pen/OJMaEOP 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>

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

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 ?