# Intersection Observer `scroll` event listeners fire hundreds of times per second — expensive and janky. The `IntersectionObserver` API is asynchronous and browser-optimized: it tells you when elements enter or leave the viewport without blocking the main thread. ## How IntersectionObserver Works Watch elements scroll into view — adjust the threshold to see how it changes when callbacks fire: `threshold: 0.5` fires when 50% of the element is visible. `rootMargin: '100px'` extends the detection zone — fires 100px before the element reaches the viewport edge. Use rootMargin for preloading (load before visible) and threshold for animations (trigger when partially visible). ## Lazy Loading Images Load images only when they approach the viewport — classic IntersectionObserver use case: Always call `io.unobserve(entry.target)` inside the callback once you have loaded the image or triggered the animation. Keeps watching an element that is already loaded wastes memory. Only call `io.disconnect()` when you want to stop observing everything. ## Scroll-Triggered Animations Animate elements in as they scroll into view — one observer handles all cards: Always wrap scroll animations with `@media (prefers-reduced-motion: reduce)` in CSS — disable or simplify animations for users who have opted out. Some users experience motion sickness from animations. ## Your Challenge Select all `.card` elements and observe each one. On intersection (threshold: 0.2), add `.visible` class and unobserve. Add CSS for the initial hidden state and the `.visible` animated state. Use `rootMargin: '0px 0px -50px 0px'` to trigger animations slightly before the card fully enters the viewport.