How can I implement lazy loading with GSAP ScrollTrigger?

How can I implement lazy loading with GSAP ScrollTrigger?

You can implement lazy loading by using GSAP's ScrollTrigger to trigger animations only when elements come into view. First, ensure you have GSAP and ScrollTrigger included in your project.

What code do I need to set this up?

You can use the following code snippet:

gsap.registerPlugin(ScrollTrigger);

const lazyLoadElements = document.querySelectorAll('.lazy-load');

lazyLoadElements.forEach(element => {
  ScrollTrigger.create({
    trigger: element,
    start: 'top 80%',
    onEnter: () => {
      gsap.fromTo(element, { opacity: 0 }, { opacity: 1, duration: 1 });
      ScrollTrigger.kill(); // Remove the trigger after animation
    }
  });
});

How do I ensure the elements are hidden before they load?

You can set the initial CSS of the elements to opacity: 0; or visibility: hidden; in your stylesheet. This way, they will be hidden until the ScrollTrigger activates.

Can I use this with images as well?

Absolutely! You can apply the same technique to images. Just ensure the images have the class .lazy-load and set their initial styles accordingly.