I'm using GSAP and IntersectionObserver to animate some texts on scroll. I want to trigger the animation only just once when the element is in the viewport.

The issue is, each time the element appears in the viewport white scrolling the animation is triggered.

const observerElement = document.querySelectorAll(".reveal-text");

const options = {
 root: null,
 rootMargin: '0px',
 threshold: 0.2
}

let callback = (entries) => {
   entries.forEach(entry => {
   if(entry.isIntersecting) {

     let revealLines = observerElement.forEach((element) => {
          const lines = element.querySelectorAll(".words");

          gsap.set(element, { autoAlpha: 1 });
          gsap.from(lines, 1, {
            yPercent: 100,
            ease: Power3.out,
            stagger: 0.25,
            delay: 0.2
          });

        });
     }
   });
}

let observer = new IntersectionObserver(callback, options);

observerElement.forEach(box => { observer.observe(box) });

Thank you.