Intersection Observer

ELI5 — The Vibe Check

Intersection Observer watches elements and tells you when they enter or leave the viewport. It's the bouncer checking if components are visible. Lazy load images, trigger animations on scroll, build infinite scroll - all without the performance nightmare of scroll event listeners.

Real Talk

The Intersection Observer API asynchronously observes changes in the intersection of a target element with an ancestor element or the viewport. It efficiently detects visibility changes without polling or scroll event listeners, commonly used for lazy loading, infinite scroll, and scroll-triggered animations.

Show Me The Code

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) loadContent(entry.target);
  });
}, { threshold: 0.5 });

When You'll Hear This

"Use IntersectionObserver for lazy loading, not scroll events" / "The threshold option lets you trigger at 50% visibility"