Intersection Observer API, bir elementin viewport veya belirtilen bir ancestor element ile kesişimini asenkron biçimde izleyen ve scroll event dinleyicilerin getirdiği performans yükünü ortadan kaldıran bir tarayıcı API'sidir. Intersection Observer API, elementin görünürlük durumunu ana thread'i bloklamadan arka planda takip eder. Scroll tabanlı animasyonlarda Intersection Observer API'nin temel kullanım deseni şu yapıyı izler: Observer nesnesi `threshold` ve `rootMargin` seçenekleriyle yapılandırılır. `threshold: 0.2`, elementin %20'si viewport'a girdiğinde callback'i tetiklemesi anlamına gelir. `rootMargin: '-100px 0px'` ise kesişim bölgesini viewport kenarından 100px içeri çekerek animasyonu erken ya da geç başlatmak için kullanılır. Intersection Observer API callback'i bir entries dizisi alır; her entry `isIntersecting` boolean'ı ve `intersectionRatio` değerini barındırır. Tek yönlü animasyonlar (element görünür olunca CSS class ekle, bir daha kontrol etme) için `isIntersecting === true` koşulunda `observer.unobserve(entry.target)` çağrısı performansı optimize eder. Çift yönlü (scroll up/down farklı animasyon) senaryolarda ise `isIntersecting` değeri her iki yön için de izlenir. CSS animasyonlarıyla entegrasyon en yaygın yaklaşımdır: element başlangıçta `opacity: 0; transform: translateY(30px)` stiliyle render edilir, observer callback'i tetiklendiğinde transition class eklenir. Bu yaklaşım animation state'ini CSS'de tutar ve JavaScript sorumluluk alanını trigger mekanizmasıyla sınırlar. Intersection Observer API v2, `isVisible` desteğiyle elementlerin fiziksel görünürlüğünü (overlay veya opacity:0 ile gizlenmeyen) doğrulamak için ek bir katman sunar.