exoblizzard

Hi, First of all, I'd like to thank all the community and dev team for a really great job. Now to the point. I'm learning GSAP and ScrollTrigger at the moment, and I've encountered an obstacle. I want to setup ScrollTrigger to fade in images, but only after they has loaded. Some kind of lazy loading. The method I think of, is setting up ScrollTrigger to run GSAP animation on images (change opacity/autoAlpha from 0 to 1) when they come into a viewport. The animation is however broken because images load too slow. I wanted to add some function to run the animation only after certain image has fully loaded. I tried something like this: const images = document.getElementsByClassName("fade-in"); for (let image of images) { image.addEventListener("load", function() { this.classList.add('loaded') ScrollTrigger.batch('.loaded', { onEnter: batch => { gsap.to(batch, { scrollTrigger: ".loaded", autoAlpha: 1, y: 0, duration: 5, stagger: 0.3, ease: "power4" }); } }) })} but I'm not sure if this is working correctly. Does this code looks logical?