Scroll-Animationen wirken, wenn sie etwas erklären: einen Ablauf, eine Reihenfolge, ein Produkt von allen Seiten. Sie bremsen, wenn sie nur dekorieren, wenn sie Inhalte verstecken, bis eine Animation fertig ist, oder wenn sie Eigenschaften bewegen, die den Browser zum Neuberechnen der ganzen Seite zwingen. Die Regel für die Praxis: Bewege nur transform und opacity, respektiere die Systemeinstellung „Bewegung reduzieren“ über prefers-reduced-motion und lass jeden Text auch ohne Animation lesbar.
Eine Scroll-Animation ist jede Bewegung auf der Seite, die durch das Scrollen ausgelöst oder gesteuert wird. Das reicht vom Absatz, der beim Hineinscrollen sanft einblendet, bis zur Kamerafahrt durch ein 3D-Modell. Dieser Beitrag geht nicht noch einmal die Ladezeit-Kennzahlen durch, die stehen im Beitrag zu den Core Web Vitals. Hier geht es um Bewegung als Gestaltungsmittel: wann sie trägt, welche Technik wofür taugt und welche Regeln der Barrierefreiheit dabei gelten.
Wann Bewegung etwas erklärt
Bewegung lenkt den Blick. Das ist ihre Stärke und ihr Problem zugleich. Ein Element, das sich bewegt, zieht Aufmerksamkeit von allem ab, was still steht. Wenn auf einer Seite alles einblendet, gleitet und sich dreht, verliert die Bewegung ihre Wirkung, weil nichts mehr hervorsticht.
Gute Gründe für eine Scroll-Animation sind deshalb inhaltlich. Ein Ablauf in vier Schritten, der sich beim Scrollen Schritt für Schritt aufbaut, zeigt die Reihenfolge besser als vier Kästen nebeneinander. Ein Produkt, das sich beim Scrollen dreht, zeigt Vorder- und Rückseite, ohne dass jemand eine Bildergalerie bedient. Ein Vorher-Nachher, das sich beim Scrollen überblendet, macht eine Veränderung greifbar.
Schwache Gründe sind „wirkt moderner“ und „die Konkurrenz hat das auch“. Wer eine Animation nicht mit einem Satz begründen kann, der mit dem Inhalt zu tun hat, braucht sie meistens nicht. Ein guter Test: Stell dir die Seite ohne die Animation vor. Fehlt dann eine Information, oder fehlt nur Bewegung?
Die Technik entscheidet über das Ruckeln
Ein Bildschirm erneuert sich bei den meisten Geräten 60 Mal pro Sekunde. Daraus ergibt sich laut web.dev, dem Entwicklerangebot von Google, ein Zeitfenster von 16,66 Millisekunden pro Bild. Weil der Browser selbst Zeit für Verwaltung braucht, bleiben für deinen Code praktisch etwa zehn Millisekunden. Wird das Fenster überschritten, fallen Bilder aus und die Seite ruckelt. Entwickler nennen das „Jank“.
Ob eine Animation dieses Fenster einhält, hängt vor allem davon ab, welche CSS-Eigenschaft sie verändert. web.dev empfiehlt, außer transform (Verschieben, Skalieren, Drehen) und opacity (Deckkraft) keine Eigenschaften zu animieren, die Layout oder Neuzeichnen auslösen. Wer dagegen top, left, width oder height animiert, zwingt den Browser, bei jedem Bild die Position vieler Elemente neu zu berechnen.
Das hat eine zweite Folge, die im Ranking zählt. Laut web.dev kannst du mit transform Elemente animieren, ohne Layoutverschiebungen auszulösen. Statt Höhe und Breite zu ändern, nimmst du transform: scale(), statt die Position über top oder left zu verschieben, nimmst du transform: translate(). So bleibt die Kennzahl für visuelle Stabilität sauber.
Der zweite Hebel ist, wie die Animation erfährt, dass gescrollt wird. Ältere Lösungen lauschen auf jedes Scroll-Ereignis und rechnen die Position jedes Elements selbst aus. Das läuft im Hauptthread, also dort, wo der Browser auch Klicks und Eingaben verarbeitet. MDN, die Dokumentation von Mozilla, beschreibt genau dieses Muster als Ursache für Leistungsprobleme und nennt als Alternative den Intersection Observer, eine Browser-Schnittstelle, die meldet, wann ein Element in den sichtbaren Bereich kommt, ohne dass dein Code dauernd mitrechnet.
Vier Techniken im Vergleich
Für fast jede Scroll-Animation gibt es heute vier Wege. Sie unterscheiden sich in Aufwand, Dateigröße und darin, wie viel Kontrolle du über jedes einzelne Bild hast.
| Technik | Was sie macht | Geeignet für | Worauf du achtest |
|---|---|---|---|
| Einblenden beim Hineinscrollen | Element erscheint per opacity und transform, ausgelöst über den Intersection Observer | Abschnitte, Karten, Zahlen | Inhalt muss ohne JavaScript sichtbar bleiben |
| CSS-Scroll-Timeline | Animation folgt direkt der Scrollposition, ohne eigenes JavaScript | Fortschrittsbalken, Parallax, Überblendungen | Firefox erst ab Version 159 (Oktober 2026), für ältere Browser Ersatzzustand nötig |
| Bildfolge | Viele Einzelbilder werden je nach Scrollposition in ein canvas gezeichnet | Produktdrehung, Kamerafahrt mit festen Bildern | Gesamtgewicht aller Bilder, Ladereihenfolge |
| WebGL | Echtzeit-3D direkt im Browser über die Grafikkarte | Freie Kamerafahrten, interaktive Modelle | Höchster Aufwand, schwache Geräte, Ersatz ohne 3D |
Die CSS-Scroll-Timeline verdient einen genaueren Blick. Mit den Funktionen scroll() und view() in der Eigenschaft animation-timeline koppelt der Browser eine normale CSS-Animation an das Scrollen. Du brauchst dafür kein Skript. Der Haken ist die Verbreitung: Stand 26. Oktober 2026 führt MDN die Eigenschaft noch nicht als Baseline, also nicht in allen großen Browsern verfügbar. Nach den Kompatibilitätsdaten von MDN und caniuse unterstützen Chrome und Edge sie seit Version 115 und Safari seit Version 26. Firefox folgt mit Version 159, die Mozilla für den 27. Oktober 2026 angesetzt hat. Wer eine ältere Version nutzt, sieht die Animation nicht. Das heißt nicht, dass du sie meiden musst. Es heißt, dass die Seite ohne die Animation genauso funktionieren muss. Dann sehen Menschen mit älteren Browsern eben einen ruhigen Zustand.
Eine Bildfolge ist das, was man von großen Produktseiten kennt: Ein Gegenstand dreht sich scheinbar flüssig, tatsächlich wechseln je nach Scrollposition Dutzende oder Hunderte Fotos. Das sieht hochwertig aus und ist berechenbar, weil jedes Bild vorher feststeht. Der Preis ist Datenmenge. Hundert Bilder zu je 100 Kilobyte sind zehn Megabyte, mehr als viele ganze Seiten. Die Bilder müssen also klein sein, in modernen Formaten und erst geladen werden, wenn der Abschnitt näher kommt.
WebGL, eine Programmierschnittstelle für 3D- und 2D-Grafik im Browser, rechnet die Szene in Echtzeit. Damit sind freie Kamerafahrten und Modelle möglich, die auf Mausbewegung reagieren. Der Aufwand ist am höchsten, und auf älteren Handys kann die Grafikkarte an ihre Grenze kommen. Für ein Handwerksunternehmen ist das selten die richtige Wahl, für ein Produkt mit vielen Varianten manchmal schon.
Bewegung reduzieren: die Einstellung, die viele übersehen
Alle großen Betriebssysteme haben eine Einstellung, mit der Menschen Bewegung auf dem Bildschirm abschalten. Auf dem iPhone heißt sie unter Bedienungshilfen „Bewegung“, unter Windows 11 „Animationseffekte“, unter Android ab Version 9 „Animationen entfernen“. Websites können diese Einstellung über die Medienabfrage prefers-reduced-motion auslesen. Sie kennt zwei Werte: no-preference, wenn nichts eingestellt ist, und reduce, wenn jemand weniger Bewegung wünscht.
Laut MDN funktioniert die Abfrage seit Januar 2020 in allen gängigen Browsern. Es gibt also keinen technischen Grund, sie zu ignorieren. Wer sie einbaut, schreibt die Animationen wie gewohnt und legt für den Wert reduce eine ruhige Fassung fest: Elemente erscheinen ohne Bewegung, Parallax steht still, eine Bildfolge zeigt ein einzelnes Standbild.
Warum das wichtig ist, erklärt das W3C, das Gremium hinter den Webstandards. Bewegung, die beim Scrollen entsteht und über die normale Scrollbewegung hinausgeht, kann bei Menschen mit Störungen des Gleichgewichtsorgans Schwindel, Übelkeit und Kopfschmerzen auslösen. Das W3C nennt Parallax ausdrücklich als Beispiel für Bewegung, die meistens nicht nötig ist. Parallax heißt, dass Hintergrund und Vordergrund sich unterschiedlich schnell bewegen.
Was die WCAG zu Animationen sagen
Die Web Content Accessibility Guidelines, kurz WCAG, sind das internationale Regelwerk für barrierefreie Websites. Ihre Erfolgskriterien sind in drei Stufen eingeteilt: A, AA und AAA. Für Scroll-Animationen sind zwei Kriterien wichtig, und sie gehören zu verschiedenen Stufen.
| Kriterium | Stufe | Was es verlangt | Typischer Fall |
|---|---|---|---|
| 2.2.2 Pausieren, Beenden, Ausblenden | A | Bewegung, die automatisch startet, länger als fünf Sekunden läuft und neben anderem Inhalt steht, muss sich anhalten, beenden oder ausblenden lassen | Laufband, endlos drehendes Logo-Karussell, Hintergrundvideo |
| 2.3.3 Animation durch Interaktion | AAA | Bewegung, die durch eine Interaktion ausgelöst wird, lässt sich abschalten, es sei denn, sie ist für Funktion oder Information wesentlich | Parallax und Einblendungen beim Scrollen |
| 2.3.1 Drei Blitze | A | Nichts blitzt öfter als dreimal pro Sekunde, außer es liegt unter den Grenzwerten | Schnelle Lichteffekte, Stroboskop im Video |
Das W3C grenzt die beiden ersten Kriterien selbst voneinander ab: 2.3.3 gilt, wenn eine Handlung des Nutzers die Animation auslöst, etwa das Scrollen. 2.2.2 gilt, wenn die Seite die Animation von sich aus startet. Eine Animation kann gegen beide verstoßen.
Stufe AAA ist die höchste und wird selten vollständig verlangt. Welche Stufe für deine Website gesetzlich zählt, steht im Beitrag zur barrierefreien Website nach BFSG. Für die Praxis macht das wenig Unterschied: Wer prefers-reduced-motion sauber umsetzt, erfüllt den Kern von 2.3.3 ohnehin, und 2.2.2 gehört zur Grundstufe.
Die häufigsten Fehler
Der teuerste Fehler ist unsichtbarer Inhalt. Viele Einblende-Effekte setzen Texte zunächst auf opacity: 0 und machen sie erst sichtbar, wenn ein Skript meldet, dass der Abschnitt im Bild ist. Lädt das Skript nicht, wird es blockiert oder kommt es zu spät, bleibt der Text unsichtbar. Sicherer ist der umgekehrte Weg: Der Inhalt ist sichtbar, und erst wenn das Skript läuft, versteckt es ihn kurz für die Animation.
Der zweite Fehler ist Scroll-Hijacking. Gemeint ist, dass die Seite das Scrollen selbst übernimmt, also Geschwindigkeit oder Richtung verändert oder Abschnitte einrasten lässt. Das fühlt sich auf dem Laptop mit Touchpad oft anders an als mit Mausrad, auf dem Handy wieder anders. Wer das will, sollte es auf allen drei Geräten testen und mit dem Wert reduce abschalten.
Der dritte Fehler ist zu viel gleichzeitig. Wenn fünf Elemente auf einmal einfliegen, weiß niemand, wohin er schauen soll. Eine Animation pro sichtbarem Bereich ist ein guter Richtwert, und sie sollte kurz sein. Wer drei Sekunden warten muss, bis eine Überschrift steht, scrollt weiter.
Der vierte Fehler ist das fehlende Rückwärtsscrollen. Viele Menschen scrollen zurück, um etwas nachzulesen. Eine Animation, die nur in eine Richtung sauber läuft, wirkt dann kaputt.
Häufige Fragen
Schaden Scroll-Animationen dem Google-Ranking?
Nicht die Animation an sich, sondern ihre Umsetzung. Wer Layout-Eigenschaften animiert, riskiert Layoutverschiebungen, und wer Inhalt nur per Skript sichtbar macht, riskiert, dass er beim ersten Laden fehlt. Mit transform, opacity und sichtbarem Grundzustand bleibt das Risiko klein.
Brauche ich eine Bibliothek wie GSAP?
Für einfache Einblendungen nicht. Intersection Observer und CSS reichen. Bibliotheken lohnen sich bei aufwendigen Abläufen mit vielen Schritten, bei denen mehrere Elemente aufeinander abgestimmt sein müssen.
Wie teste ich prefers-reduced-motion?
Schalte die Einstellung im Betriebssystem ein, etwa unter iOS in den Bedienungshilfen bei „Bewegung“, und lade die Seite neu. In den Entwicklerwerkzeugen von Chrome lässt sich der Wert auch simulieren, ohne das System umzustellen.
Ist Parallax verboten?
Nein. Das W3C nennt Parallax als Beispiel für Bewegung, die meistens nicht wesentlich ist, und verlangt auf Stufe AAA, dass sie sich abschalten lässt. Wer bei reduce den Effekt stoppt, ist auf der sicheren Seite.
Was du jetzt tun kannst
Geh deine Website einmal mit dem Handy durch und schreib jede Bewegung auf, die dir auffällt. Dann arbeite die Liste in dieser Reihenfolge ab.
- Frag bei jeder Animation: Erklärt sie etwas? Wenn nicht, streich sie.
- Schalte im Betriebssystem „Bewegung reduzieren“ ein und prüf, ob die Seite ruhiger wird. Wenn nicht, fehlt die Abfrage
prefers-reduced-motion. - Schalte JavaScript im Browser ab und prüf, ob alle Texte sichtbar sind.
- Such nach Laufbändern und Karussells, die von selbst laufen, und gib ihnen einen Pause-Knopf.
- Lass prüfen, welche Eigenschaften animiert werden. Alles außer
transformundopacityist ein Kandidat für Umbau. - Teste das Rückwärtsscrollen auf einem älteren Handy.
Wenn du Beispiele sehen willst, wie Bewegung auf Kundenseiten eingesetzt wird, findest du sie bei den Referenzen. Und wenn die Website ohnehin umgebaut wird, gehört das Thema in die Planung der Webentwicklung und nicht ans Ende.
Quellen
- Understanding SC 2.3.3: Animation from Interactions (Level AAA) (W3C Web Accessibility Initiative), abgerufen am 2026-10-26
- Understanding SC 2.2.2: Pause, Stop, Hide (Level A) (W3C Web Accessibility Initiative), abgerufen am 2026-10-26
- Understanding SC 2.3.1: Three Flashes or Below Threshold (Level A) (W3C Web Accessibility Initiative), abgerufen am 2026-10-26
- prefers-reduced-motion, CSS media feature (MDN Web Docs, Mozilla), abgerufen am 2026-10-26
- animation-timeline, CSS property (MDN Web Docs, Mozilla), abgerufen am 2026-10-26
- CSS scroll-driven animations (MDN Web Docs, Mozilla), abgerufen am 2026-10-26
- CSS property: animation-timeline, Browserunterstützung (caniuse.com), abgerufen am 2026-10-26
- Intersection Observer API (MDN Web Docs, Mozilla), abgerufen am 2026-10-26
- WebGL: 2D and 3D graphics for the web (MDN Web Docs, Mozilla), abgerufen am 2026-10-26
- How to create high-performance CSS animations (web.dev, Google), abgerufen am 2026-10-26
- Rendering performance (web.dev, Google), abgerufen am 2026-10-26
- Cumulative Layout Shift (CLS) (web.dev, Google), abgerufen am 2026-10-26
- Browser-Kompatibilitätsdaten css.properties.animation-timeline (Firefox 159, Safari 26, Chrome 115) (MDN Web Docs, Mozilla), abgerufen am 2026-10-26
- Firefox Release Calendar (Firefox 159: 27. Oktober 2026) (Mozilla), abgerufen am 2026-10-26
Stand dieses Beitrags: 2026-10-26. Rechtslage und Zahlen ändern sich, prüf vor einer Entscheidung die verlinkten Quellen.
