Intersection Observer for Scroll-Triggered Reveal Animations

Triggering animations when elements scroll into view via scroll event listeners is expensive due to constant main-thread work.

Use IntersectionObserver to watch elements and add an animation class when they enter the viewport. Disconnect the observer after the element has been seen once if the animation should not repeat.

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('animate-in');
        observer.unobserve(entry.target);
      }
    });
  },
  { threshold: 0.1 }
);

document.querySelectorAll('.reveal').forEach((el) => observer.observe(el));

// React hook
function useInView(ref, options = {}) {
  const [inView, setInView] = useState(false);
  useEffect(() => {
    const obs = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) { setInView(true); obs.disconnect(); }
    }, options);
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return inView;
}

IntersectionObserver runs off the main thread and batches intersection events, making it far more performant than polling scroll position with addEventListener('scroll').