0

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.

Mathieu Préaud
  • 357
  • 3
  • 16
  • "each time the element appears in the viewport white scrolling the animation is triggered." Can you clarify the issue? That's the point of the observer – Phix Feb 14 '22 at 16:07
  • I'm sorry it's not a really an issue. It's the behaviour that I would like to modify. What I'm trying to achieve is when you scroll to the element ".reveal-text" it triggers the animation. Then if you scroll again to this element the animation is not triggered. So the animation would be triggered only once. – Mathieu Préaud Feb 14 '22 at 16:16
  • Once the animation is complete, it keeps the complete state. – Mathieu Préaud Feb 14 '22 at 16:29
  • 1
    Does this answer your question? [Intersection Observer: Call a function only once per element](https://stackoverflow.com/questions/53684503/intersection-observer-call-a-function-only-once-per-element) – Sean W Feb 14 '22 at 16:33
  • Thank you @SeanW the solution provided in this thread answer my question. – Mathieu Préaud Feb 14 '22 at 17:11

0 Answers0