[Setup ScrollTrigger to start animation only when an image finished loading]

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?