Wir entfernten Lenis und ScrollTrigger: Scrollen ist CSS.

Zwei Scroll-Bibliotheken wurden ausgemustert, eine dritte kam nicht; die Szenen zogen auf die Zeitachse der Plattform um — Gewinn und Preis wurden gemessen.

Auf dieser Website steuerte eine Bibliothek das Scrollen am Desktop, und eine zweite löste die Szenen aus. Beide sind weg. Keine dritte Bibliothek hat sie ersetzt: Scrollen ist jetzt die eigene Zeitachse des Browsers, und die Szenen sind CSS-Animationen, die auf ihr laufen. Dieser Beitrag ist die Messung dieses Wechsels — mit Gewinn und Preis.

Hypothese

Die Hypothese lautete: alle Scroll-Szenen dieser Website — die Fixierungen, die Schärfegeste, die Schreibmaschine, die Zähler, die Schaufenster-Parallaxe, die Lesezeile — lassen sich mit der Ansichtszeitachse der Plattform bauen. JavaScript bleibt für das, was CSS nicht kann: Canvas, Daten, Barrierefreiheit und Text. Dafür verschwinden die Bytes zweier Bibliotheken und eine Synchronschleife, die in jedem Bild läuft.

Methode

Vier Scheiben, jede mit eigenem vollständigen Testlauf abgeschlossen, und keine trug das Rot der vorherigen weiter. Zuerst wurden die vier Bindungen der Smooth-Scrolling-Bibliothek einzeln übergeben: die Synchronisierung des Auslösers, die des Ankers, das seiteninterne Gleiten sowie Richtung und Tempo des Laufbands. Dann gingen einmalige Auftritte an einen Intersection Observer und die ersten beiden Flächen an CSS-Zeitachsen. Die dritte Scheibe verschob die Szenen der Startseite und der Leistungsseiten. In der vierten wurde die Auslöser-Bibliothek gelöscht.

Datum und Umgebung

1. Datum → 2026-09-02 · vier Scheiben · live geprüft
2. weg → Smooth Scrolling + Scroll-Auslöser
3. bleibt → Animationskern · Textteilung · Linienzeichnen
4. Methode → animation-timeline: view() · IntersectionObserver

Ergebnis

Das Anbieterpaket sank komprimiert von 51,1 auf 33,5 Kilobyte; allein die Auslöser-Bibliothek wog 17,6 Kilobyte und wurde auf jeder Seite ausgeliefert. Zwölf von zwölf Szenen laufen jetzt auf CSS-Zeitachsen. Am Fenster hängende Scroll-Listener gingen auf null — die verbliebenen vier sind im Quelltext mit Begründung markierte Ausnahmen. Live fiel der schlechteste echte LCP von 592–640 Millisekunden auf 440, die Blockierzeit auf 0–10 Millisekunden, und die Layoutverschiebung im Labor blieb bei null.

1. Anbieterpaket → 51,1 → 33,5 KB (gzip)
2. CSS-Szenen → 12 / 12
3. Scroll-Listener → 0 (4 begründete Ausnahmen)
4. echter LCP (schlechtester) → 592–640 → 440 ms

Das Kleingedruckte der Plattform

Der Wechsel war nicht gratis; an drei Stellen hat uns die Messung belehrt. Der Standardabstand einer Ansichtszeitachse rechnet die Scroll-Polsterung des Scrollports mit, weshalb die Lesezeile erst bei 4,5 % des Artikels begann; auf null gesetzt stimmte sie an sieben Abtastpunkten exakt mit der alten JavaScript-Formel überein. Für den Bereich „Oberkante oben, Unterkante oben“ war nicht das naheliegende Schlüsselwort richtig, sondern dessen kreuzende Variante: in einem Abschnitt, der höher ist als der Viewport, verschob die erste Wahl den Bereich um 304 Pixel und nahm seine Länge vom Viewport statt vom Objekt. Und ein Zähler, der die Geschwisterreihenfolge liest, wird in einem Kindelement neu aufgelöst, wenn die Custom Property nicht registriert ist — alle drei Zeilen bekamen dann denselben Wert.

Ein Fehler, der mit der Bibliothek ging

Die Bibliothek nahm im Abgang einen Fehler mit. Seiteninterne Anker landeten manchmal nicht am Ziel; die Wurzel war, dass die Bibliothek beim Einrichten die aktuelle Scrollposition als Ziel nahm, während der Browser den Ankersprung danach anwandte — die eigene Schleife zog die Seite dann zurück. Der Fehler war am Tor gemessen: mit installierter Bibliothek war einer von zwanzig Versuchen kaputt, in den beiden Modi ohne sie keiner. Beim nativen Scrollen geht der Browser selbst zum Anker, und das Rennen entfällt.

Die Lehre: auch das Messwerkzeug ist abhängig

Während die Prüfsuite vollständig grün war, blieb die Barrierefreiheitsprüfung mit „ScrollTrigger is not defined“ stehen. Das Werkzeug las den Bereich einer Szene aus der ausgemusterten Bibliothek, und die Suite kann das nicht sehen, weil die Prüfung außerhalb der Suite läuft. Wird eine Bibliothek ausgemustert, prüft man nicht nur das Produkt, sondern auch die Instrumente, die es messen.

Grenzen

Der Animationskern ist geblieben: die Schärfegeste, die Signatur dieser Website, und ihre gemessenen Layout-Sperren leben weiterhin in JavaScript. Das Planziel „unter dreißig Kilobyte“ hielt deshalb nicht, es blieb bei 33,5; die Budgetgrenze sichert den Rückschritt ab, nicht das Ziel. In einer Engine ohne Zeitachsen-Unterstützung ruhen die Szenen auf ihrem Endwert — verloren geht Bewegung, nicht Inhalt.

Scrollen ist kein Ereignis, sondern eine Zeitachse.