IntersectionObserver for Scroll-Triggered Effects

The IntersectionObserver API efficiently monitors whether one or more elements enter or leave the browser viewport (or a specified ancestor element). Unlike scroll listeners that fire on every pixel, the observer only calls your callback when the element crosses a threshold, making it far more performant for scroll-based effects.

The callback receives an array of IntersectionObserverEntry objects, one per observed element. Each entry has an isIntersecting boolean (true when visible) and an intersectionRatio number between 0 and 1 (fraction of the element currently visible). Use these to determine visibility state.

Create the observer inside a useEffect and call observer.observe(ref.current) to start watching the element. The ref must be attached to the DOM element you want to track. Create the observer after the component mounts so ref.current is populated.

In the useEffect cleanup function, call observer.unobserve(element) to stop watching a specific element, or observer.disconnect() to stop all observations. Forgetting cleanup causes the observer to persist after the component unmounts, potentially causing errors or memory leaks.

The threshold option controls when the callback fires. A value of 0 triggers as soon as any pixel of the element is visible. A value of 1 triggers only when the element is fully visible. You can also pass an array like [0, 0.5, 1] to receive callbacks at multiple visibility levels.

rootMargin extends or shrinks the effective intersection area using CSS-like syntax: '100px 0px' triggers 100px before the element enters the viewport. Use '-100px' to trigger only when the element is 100px inside the viewport. This is useful for preloading or animating before the element is fully visible.

To lazy-load images, set a data-src attribute instead of src initially. When the observer fires with isIntersecting: true, copy data-src to src to trigger the network request. Then call observer.unobserve(entry.target) since the image only needs to load once.

For fade-in animations, add a CSS class when isIntersecting becomes true: element.classList.add('visible'). Define the transition in CSS: .card { opacity: 0; transform: translateY(20px); transition: opacity 0.4s, transform 0.4s; } and .card.visible { opacity: 1; transform: none; }. The observer fires the trigger efficiently.

IntersectionObserver is ideal for view tracking. When an element with a data-analytics-id attribute becomes intersecting with a threshold of 0.5, fire an analytics event. This accurately measures which content sections users actually read, far more reliable than simple scroll depth percentage.

A single IntersectionObserver instance can observe multiple elements by calling observer.observe(element) for each one. All observed elements share the same callback and options. Use entry.target inside the callback to identify which element triggered the notification.

A reusable useInView hook returns [ref, inView]. Attach ref to any element and read inView to know if it is currently visible. The hook accepts an options object for threshold and rootMargin. This abstraction makes scroll effects declarative in any component.

What does an IntersectionObserver threshold of 0 mean?

IntersectionObserver efficiently tracks element visibility using isIntersecting and intersectionRatio. Always clean up with unobserve or disconnect. Use threshold to control the trigger point and rootMargin to extend the detection zone. Apply it for lazy loading, animations, and analytics tracking.