Schaden Scroll-Animationen der Performance?
Vergleichen Sie die Performance von Scroll-Animationen: Scroll-Event-Listener vs. IntersectionObserver und CSS Scroll-Driven Animations auf Core Web Vitals (INP).
Kernaussage
Klassische Scroll-Animationen via window.addEventListener('scroll') schaden der Performance erheblich, weil sie bei jedem Scroll-Tick synchronen JavaScript-Code ausführen und Eingaben blockieren. Zeitgemäße Methoden wie CSS Scroll-Driven Animations und IntersectionObserver laufen hingegen außerhalb des Haupt-Threads und liefern stabile 60 FPS, ohne den Interaction to Next Paint (INP) zu verschlechtern.
Der Engpass klassischer Scroll-Listener
Das Abfragen von getBoundingClientRect() oder pageYOffset in einem Scroll-Listener erzwingt synchrone Layout-Neuberechnungen pro Bild. Bei schnellem Wischen auf Touchscreens blockiert der Haupt-Thread, was zu Rucklern führt und Googles Core Web Vitals (INP) scheitern lässt.
IntersectionObserver für Einblendungen beim Hereinscrollen
Für Elemente, die beim Erreichen des Sichtbereichs einblenden, ist IntersectionObserver die optimale Lösung. Er berechnet Schnittmengen asynchron im Kompositor, ohne bei jedem Scroll-Pixel eine synchrone Funktion abzufeuern.
- Lesen Sie niemals getBoundingClientRect() in rohen Scroll-Listenern ab
- Nutzen Sie IntersectionObserver mit rootMargin für vorausschauende Einblendungen
- Setzen Sie auf CSS Scroll-Driven Animations für flüssige Koppelung ohne JS
- Deklarieren Sie immer passive: true auf verbleibenden Scroll-Listenern
CSS Scroll-Driven Animations (@scroll-timeline)
Moderne Browser beherrschen CSS scroll()- und view()-Timeline-Funktionen. Damit wird der Fortschritt einer Keyframe-Animation direkt im Kompositor an das Scrollen gekoppelt – ohne eine einzige Zeile JavaScript während des Scrollens.
Barrierefreiheit und vestibulärer Komfort
Große Parallax-Hintergründe oder dauerhafte Zoomeffekte beim Scrollen können bei Menschen mit vestibulären Störungen Schwindelgefühle auslösen. Schalten Sie Parallax-Effekte unter prefers-reduced-motion stets ab.
Wichtige Prinzipien
- Koppeln Sie niemals synchrone Layout-Abfragen an rohe Scroll-Events
- Verwenden Sie IntersectionObserver für saubere Einblendungen
- Nutzen Sie CSS Scroll-Driven Animations für Ausführung außerhalb des Haupt-Threads
- Deaktivieren Sie Parallax-Effekte bei reduzierter Bewegung vollständig
Häufige Fragen
Quellen
- Scroll-driven animations specification — W3C
- Optimize Interaction to Next Paint (INP) — Google Web.dev