Scroll-Animationen ohne JavaScript: der Praxis-Guide

Der Kunde hat ein Bild im Kopf: Beim Scrollen sollen die Projektkacheln sanft hereinfließen, oben soll ein dünner Balken den Lesefortschritt zeigen, das Titelbild soll sich leicht verschieben. Früher hieß das: eine JavaScript-Bibliothek einbinden, Scroll-Events abfangen, bei jedem Pixel nachrechnen – und hoffen, dass es auf dem Smartphone nicht ruckelt. Genau dieses Ruckeln ist das alte Problem: Scroll-Effekte, die im JavaScript-Hauptthread hängen, konkurrieren mit allem anderen und machen die Seite träge. Seit 2026 gibt es dafür eine Lösung, die der Browser selbst übernimmt.

Scroll-driven Animations verknüpfen eine CSS-Animation direkt mit der Scroll-Position – ganz ohne Skript. Für kleine Agenturen ist das mehr als eine Spielerei: weniger Fremdcode, flüssigere Effekte und ein sichtbares Qualitätsmerkmal, das kaum Wartung kostet. Dieser Beitrag zeigt dir die zwei Grundbausteine, fertige Beispiele für den Alltag und – ehrlich – wo die Grenzen beim Browser-Support liegen.

Scroll-Animationen ohne JavaScript: die zwei Zeitachsen verstehen

Der ganze Ansatz steht und fällt mit einer einzigen neuen Idee: Eine Animation braucht nicht zwingend eine Zeit, sie kann auch an eine Fortschritts-Achse gekoppelt sein. Statt „laufe über zwei Sekunden“ sagst du „laufe von 0 bis 100 Prozent Scroll-Fortschritt“. Diese Achse heißt animation-timeline, und es gibt sie in zwei Geschmacksrichtungen.

Die erste ist die Scroll-Fortschritts-Achse, im CSS als scroll() geschrieben. Sie misst, wie weit ein Container – meist die ganze Seite – gescrollt ist: 0 Prozent ganz oben, 100 Prozent ganz unten. Das ist der perfekte Antrieb für einen Lesefortschrittsbalken.

Die zweite ist die Sichtbarkeits-Achse, geschrieben als view(). Sie bezieht sich auf ein einzelnes Element und misst, wo es sich im sichtbaren Bereich befindet: Der Fortschritt beginnt, wenn das Element von unten in den Viewport eintritt, und endet, wenn es oben wieder verschwindet. Damit steuerst du Effekte, die genau dann ablaufen sollen, wenn ein Element ins Bild kommt – das klassische Einblenden beim Scrollen.

Beispiel 1: Der Lesefortschrittsbalken

Fangen wir mit dem Fortschrittsbalken an, weil er die scroll()-Achse in Reinform zeigt. Du brauchst ein schmales Element am oberen Rand und wenige Zeilen CSS:

@keyframes wachsen {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.fortschritt {
  position: fixed;
  top: 0; left: 0;
  height: 4px;
  width: 100%;
  background: #0b5;
  transform-origin: left;
  animation: wachsen linear;
  animation-timeline: scroll(root block);
}

Die letzte Zeile ist der ganze Zauber: scroll(root block) bindet die Animation an den vertikalen Scroll-Fortschritt des Dokuments. Je weiter der Besucher scrollt, desto breiter wird der Balken – ohne ein einziges Scroll-Event, ohne eine Zeile JavaScript. Dass solche entfernten Abhängigkeiten nicht nur Tempo, sondern auch den Datenschutz betreffen, zeigt der Beitrag zum Reduzieren von Third-Party-Skripten.

Beispiel 2: Elemente beim Scrollen einblenden

Der zweite Klassiker ist das sanfte Hereinfließen von Karten oder Absätzen. Hier kommt die view()-Achse ins Spiel, weil jeder Block seinen eigenen Fortschritt bekommt:

@keyframes einblenden {
  from { opacity: 0; transform: translateY(2rem); }
  to   { opacity: 1; transform: translateY(0); }
}

.karte {
  animation: einblenden linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}

animation-timeline: view() koppelt die Animation an die Sichtbarkeit der Karte selbst. Mit animation-range legst du fest, in welchem Abschnitt der Effekt abläuft – hier vom Moment des Eintritts (entry 0%) bis zu dem Punkt, an dem die Karte zu 40 Prozent ins Bild gerückt ist. Das both sorgt dafür, dass der Anfangszustand schon gilt, bevor die Animation startet, und der Endzustand danach erhalten bleibt. So entsteht genau der Effekt, für den früher ein Intersection Observer samt Skript nötig war.

Beispiel 3: Das Titelbild, das sich mitbewegt

Bleibt der dritte Wunsch aus dem Eingangsszenario – das Titelbild, das sich beim Scrollen leicht verschiebt. Auch dieser Parallax-Effekt lässt sich mit der view()-Achse umsetzen, indem du das Bild über seinen Sichtbarkeitsfortschritt sanft verschiebst:

@keyframes parallax {
  from { transform: translateY(-8%); }
  to   { transform: translateY(8%); }
}

.titelbild {
  animation: parallax linear;
  animation-timeline: view();
}

Während der Bildbereich durch den Viewport wandert, gleitet das Bild innerhalb seines Rahmens – ein dezenter Tiefeneffekt, für den früher eine Parallax-Bibliothek nötig war. Wichtig ist Maß: Ein Versatz von wenigen Prozent wirkt hochwertig, ein zu großer lenkt ab und kann bei empfindlichen Nutzern unangenehm sein. Genau deshalb ist die prefers-reduced-motion-Regel aus dem nächsten Abschnitt auch hier Pflicht.

Warum das flüssiger läuft als die JavaScript-Variante

Der eigentliche technische Gewinn liegt unter der Oberfläche. Eine JavaScript-Lösung hört auf Scroll-Events und berechnet bei jeder Bewegung Positionen – und das im Hauptthread, also dort, wo auch alle Klicks und Eingaben verarbeitet werden. Gerät dieser Thread ins Stocken, ruckelt nicht nur die Animation, sondern die ganze Bedienung.

Scroll-driven Animations umgehen das, weil der Browser die Kopplung an den Scroll-Fortschritt selbst verwaltet und kompositorfreundliche Eigenschaften wie transform und opacity abseits des Hauptthreads animieren kann. Das Ergebnis ist spürbar geschmeidiger, besonders auf schwächeren Smartphones – und es zahlt direkt auf die Core Web Vitals ein, weil die Reaktionsfähigkeit der Seite nicht mehr unter dem Scroll-Effekt leidet. Zugleich fällt eine weitere JavaScript-Abhängigkeit weg, die gepflegt, aktualisiert und auf Sicherheitslücken geprüft werden müsste – derselbe Wartungsvorteil, den auch das CSS-Karussell ohne JavaScript bietet.

Barrierefreiheit: prefers-reduced-motion ist Pflicht

Bewegung ist nicht für alle angenehm. Manche Menschen reagieren auf starke Animationen mit Schwindel oder Unwohlsein und stellen deshalb im Betriebssystem „Bewegung reduzieren“ ein. Dieser Wunsch lässt sich in CSS respektieren, und bei scrollgesteuerten Effekten gehört das zum Pflichtprogramm:

@media (prefers-reduced-motion: reduce) {
  .karte { animation: none; }
}

Die Regel schaltet die Animation für alle ab, die sie nicht wollen – der Inhalt bleibt vollständig sichtbar, nur die Bewegung entfällt. Das ist kein Nice-to-have, sondern Teil sauberer, zugänglicher Arbeit.

Der ehrliche Blick auf den Browser-Support

Jetzt der Punkt, den du im Kundengespräch kennen musst. Scroll-driven Animations sind noch kein Baseline-Feature, das überall gleich funktioniert. Chrome und Edge liefern sie seit Version 115 aus dem Juli 2023, haben also einen langen Vorlauf. Safari zog mit Version 26 im September 2025 nach und hat die Umsetzung seither verbessert. Firefox ist der Nachzügler: In der stabilen Version 152 vom Juni 2026 steckt die Funktion noch hinter einem Schalter, ist in der Nightly-Version aber bereits aktiv und als Schwerpunkt des Interop-2026-Projekts gesetzt – die Browserhersteller arbeiten also koordiniert daran, die Lücke zu schließen. Die bei caniuse zusammengetragenen Daten weisen die globale Unterstützung derzeit mit rund 82 Prozent aus.

Die entscheidende Frage ist deshalb nicht „kann ich das nutzen?“, sondern „was passiert, wenn der Browser es nicht kann?“. Und hier liegt die eigentliche gute Nachricht: Baust du die Effekte als progressive Verbesserung, sieht ein Firefox-Nutzer einfach den sauberen Endzustand ohne Bewegung – die Karte ist da, nur fliegt sie nicht herein. Nichts bricht, nichts fehlt. Genau dieses Prinzip, Grundfunktion überall und moderner Effekt obendrauf, ist der verlässliche Weg, neue CSS-Fähigkeiten einzusetzen, wie ihn auch die Beiträge zu Baseline 2026 und zur View Transitions API beschreiben.

Fazit

Scroll-Animationen ohne JavaScript sind 2026 vom Experiment zur praxistauglichen Technik geworden. Mit nur zwei Bausteinen – der scroll()-Achse für seitenweite Effekte wie Fortschrittsbalken und der view()-Achse für das Einblenden einzelner Elemente – ersetzt du ganze Skript-Bibliotheken durch wenige Zeilen CSS. Das Ergebnis läuft flüssiger, weil der Browser die Arbeit abseits des Hauptthreads erledigt, es spart Wartung, weil eine Abhängigkeit wegfällt, und es bleibt zugänglich, solange du prefers-reduced-motion respektierst. Der einzige Haken ist Firefox, das die Funktion noch nicht standardmäßig aktiviert – doch mit progressiver Verbesserung wird daraus kein Risiko, sondern nur ein Effekt, den ein Teil der Nutzer vorerst nicht sieht. Für kleine Agenturen ist das die ideale Mischung: sichtbare Politur für die Kundenseite bei minimalem Aufwand und vollem Rückfallnetz.