Estoy usando GSAP e IntersectionObserver para animar algunos textos en el desplazamiento. Quiero activar la animación solo una vez cuando el elemento está en la ventana gráfica.

El problema es que cada vez que el elemento aparece en la ventana gráfica, se activa el desplazamiento en blanco de la animación.

 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) });

Gracias.