Zum Hauptinhalt springen
2 Min. LesezeitVon Klemens Kaindl

Scroll-Animationen ohne JavaScript: Was CSS jetzt kann

Scroll-driven Animations sind Baseline, Chrome 145 bringt scroll-triggered. Zeit, GSAP aus den Dependencies zu streichen.

GSAP war jahrelang die Antwort auf alles, was sich beim Scrollen bewegen sollte. ScrollTrigger funktioniert, das ist unbestritten. Aber der Trade-off ist real: rund 100kb Bundle-Größe, eine JavaScript-Abhängigkeit mehr, und früher oder später das Update, das Dinge zerschießt.

Seit Chrome 115 gibt es Scroll-driven Animations nativ im Browser. Safari 18 ist dabei. Firefox hat Support hinter einem Flag. Für die meisten Projekte sind die Browser-Zahlen heute gut genug.

Zwei Timeline-Typen, zwei Use Cases

Scroll Progress Timeline koppelt die Animation direkt an die Scroll-Position des Containers. Klassischer Use Case: Lesefortschrittsbalken oben auf einem Artikel.

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

.progress-bar {
  animation: progress linear;
  animation-timeline: scroll(root);
  transform-origin: left;
}

Kein addEventListener, kein requestAnimationFrame. Der Browser läuft das auf dem Compositor-Thread, ohne Jank.

View Progress Timeline reagiert darauf, wie weit ein Element im Viewport steht. Das war jahrelang IntersectionObserver-Territory:

@keyframes fade-in {
  from { opacity: 0; translate: 0 24px; }
  to { opacity: 1; translate: 0 0; }
}

.section {
  animation: fade-in ease-out both;
  animation-timeline: view();
  animation-range: entry 0% entry 40%;
}

animation-range steuert, bei welchem Punkt des Sichtbarkeitsfortschritts die Animation beginnt und endet. Präzise Section-Reveals, alles in CSS.

Das Neue in Chrome 145

Ein Problem hat Scroll-driven Animations immer begleitet: die Animation läuft rückwärts, wenn man nach oben scrollt. Bei einem Leseschrittsbalken ist das korrekt. Bei einem Element-Reveal wirkt es seltsam.

Chrome 145 bringt scroll-triggered animations, konzeptuell eine andere Kategorie. Triggered heißt: die Animation startet einmal, wenn ein Schwellwert überschritten wird, und läuft dann zeitbasiert durch. Das klassische "Element erscheint beim ersten Sichtbar werden". Genau wie GSAP ScrollTrigger, aber nativ, ohne Library.

Das ist der Use Case, der noch gefehlt hat. Für einfache Scroll-Effekte gibt es jetzt keinen guten Grund mehr, externe JavaScript einzuladen.

Wann noch JavaScript?

Komplexe Sequenzen über viele Elemente gleichzeitig. Easing-Kurven, die CSS nicht kennt. Scroll-Events, die mit anderer Logik koordiniert werden müssen. Und wenn Firefox-Support ohne Flag kritisch ist.

Für Content-Sites (Portfolios, Firmenseiten, Landingpages) reicht CSS für rund 80% der typischen Scroll-Animation-Anforderungen. Weniger Bundle-Size, schnellerer First Contentful Paint, keine Abhängigkeit, die irgendwann Wartung will.

Browser Support

Feature Chrome Safari Firefox
Scroll-driven 115+ ✓ 18+ ✓ Flag
Scroll-triggered 145+ ✓ n/a n/a

Progressive Enhancement per Feature Detection:

@supports (animation-timeline: scroll()) {
  .progress-bar {
    animation: progress linear;
    animation-timeline: scroll(root);
  }
}

Browser ohne Support bekommen keine Animation, was sauberer ist als ein kaputtes JavaScript-Fallback.

Quellen: MDN: CSS scroll-driven animations · scroll-driven-animations.style · Chrome for Developers: Scroll-triggered animations

Weiterlesen

← Alle Artikel