Scroll-Animationen ohne JavaScript

Der klassische Weg ist ein Listener: Man hängt sich an das scroll-Ereignis, liest bei jedem Aufruf die Position aus und rechnet daraus einen Wert. Das funktioniert, aber es passiert an der empfindlichsten Stelle, die der Browser hat, nämlich im Hauptthread. Dort wird auch alles andere erledigt: Klicks beantworten, Layout rechnen, zeichnen.

Dazu kommt eine Falle, die man leicht übersieht. Wer im Listener eine Größe abfragt, etwa über getBoundingClientRect, zwingt den Browser dazu, das Layout sofort neu zu berechnen. Bei sehr vielen Aufrufen pro Sekunde wird daraus ein Ruckeln, das sich nicht mehr wegoptimieren lässt, weil die Arbeit selbst das Problem ist.

IntersectionObserver nimmt einen Teil der Last ab, beantwortet aber nur eine Ja-Nein-Frage: Ist das Element im Bild? Für ein einfaches Einblenden reicht das. Für alles, was sich weich mit dem Scrollen verändert, fehlt der Fortschritt dazwischen. Genau diese Lücke schließen Scroll-Zeitleisten in CSS.

Eine CSS-Animation läuft normalerweise auf einer Uhr: Sie dauert 400 Millisekunden, und der Fortschritt ergibt sich aus der verstrichenen Zeit. Die Eigenschaft animation-timeline tauscht diese Uhr gegen etwas anderes aus. Die Keyframes bleiben unverändert, nur die Frage nach dem Fortschritt wird anders beantwortet.

scroll() liefert den Fortschritt eines Scrollbereichs. Null Prozent ist ganz oben, hundert Prozent ganz unten. Das ist die Zeitleiste für alles, was den Stand der ganzen Seite abbildet, etwa eine Leseleiste oder eine Markierung am Rand.

view() liefert den Fortschritt eines einzelnen Elements durch den sichtbaren Bereich. Null Prozent ist der Moment, in dem es unten hereinkommt, hundert Prozent der Moment, in dem es oben verschwindet. Das ist die Zeitleiste für alles, was an einem Abschnitt hängt: einblenden, verschieben, aufziehen.

Die Leseleiste ist das kleinste sinnvolle Beispiel: ein feiner Balken am oberen Rand, der mit dem Scrollen aufzieht. Wichtig ist, nicht die Breite zu animieren, sondern transform mit scaleX. Breite bedeutet Layout, scaleX bedeutet nur zeichnen, und diese Arbeit kann der Browser aus dem Hauptthread heraushalten.

Die Angabe transform-origin: left sorgt dafür, dass der Balken links verankert bleibt und nach rechts wächst, statt aus der Mitte heraus in beide Richtungen zu laufen. Ohne sie sieht die Leiste aus wie ein Regler, nicht wie ein Fortschritt.

Zwei Wörter in der Kurzform sind dabei entscheidend. linear hält den Fortschritt fest an die Scrollposition gebunden, denn eine Beschleunigungskurve über die ganze Seite fühlt sich an, als würde der Balken der eigenen Geste hinterherhinken. both sorgt dafür, dass der Balken vor und nach dem Bereich stehen bleibt, statt zurückzuspringen.

Für das Einblenden ist view() die richtige Zeitleiste, und dazu kommt eine zweite Angabe: animation-range. Ohne sie läuft die Animation über den gesamten Weg des Elements durch das Bild, vom ersten Pixel unten bis zum letzten oben. Das ist fast nie gemeint, denn dann ist der Abschnitt erst fertig eingeblendet, wenn er schon wieder verschwindet.

Die Abschnitte dieses Weges haben Namen. entry ist das Hereinkommen von unten, exit das Hinausgehen nach oben, cover der ganze Weg von der ersten bis zur letzten Berührung, contain die Strecke, auf der das Element vollständig im Bild ist. Mit Prozentwerten schneidest du daraus ein Stück heraus.

animation-range: entry 0% entry 60% heißt also: anfangen, sobald die Oberkante hereinkommt, fertig sein, wenn das Element zu sechzig Prozent hereingekommen ist. Das ergibt ein Einblenden, das abgeschlossen ist, bevor jemand den Abschnitt zu lesen beginnt. Genau das will man, denn Text, der sich beim Lesen noch bewegt, ist ärgerlich.

Tailwind v4 bringt für Scroll-Zeitleisten keine eigenen Klassen mit. Das ist kein Hindernis, denn beide Teile, die man dafür braucht, sind vorhanden: eigene Animationen über das Theme und beliebige Eigenschaften in eckigen Klammern.

Keyframes und Name gehören in die CSS-Datei. In v4 macht eine Variable unter --animate- daraus ein Utility: aus --animate-einblenden wird die Klasse animate-einblenden, und die Kurzform mit linear und both steckt direkt im Wert. Damit steht die Animation bereit, ohne dass im Markup etwas davon zu sehen ist.

Die Zeitleiste kommt als beliebige Eigenschaft dazu. Leerzeichen schreibt man in eckigen Klammern als Unterstrich, sonst bricht die Klasse mitten im Wert. Aus animation-range: entry 0% entry 60% wird deshalb [animation-range:entry_0%_entry_60%].

Die Mechanik ist überschaubar, aber sie hat ein paar Stellen, an denen man zuverlässig hängenbleibt. Meist liegt es nicht an der Animation selbst, sondern daran, welchen Bereich der Browser gerade meint.

Ein Punkt gehört offen gesagt: Diese Technik ist noch nicht überall angekommen. Chrome und Edge haben sie seit Mitte 2023, Safari seit Version 26 im Herbst 2025. Firefox hat die Umsetzung zum Stand dieses Beitrags noch nicht standardmäßig aktiv.

Das ist kein Grund, sie zu meiden, sondern einer, sie als Zugabe zu bauen. Und es ist zugleich die Antwort auf die Frage, wann sich der Umstieg von framer-motion überhaupt lohnt: bei allem, dessen Ausbleiben niemandem auffällt.

Für die ersten beiden Fälle sieht die Rückfallebene immer gleich aus. Der lesbare Zustand steht im normalen CSS, und nur innerhalb von @supports wird daraus eine Bewegung. Dazu kommt die Abfrage, die bei jeder Animation dazugehört: Wer prefers-reduced-motion auf reduce gestellt hat, will keine Bewegung beim Scrollen, und diese hier ist besonders unangenehm, weil sie unmittelbar an der eigenen Geste hängt.