Was gibt es Neues bei scrollgesteuerten Animationen?

Scrollgesteuerte Animationen sind eine großartige Möglichkeit, Interaktivität und visuelles Interesse auf Ihrer Website oder Webanwendung zu schaffen. Durch die Auslösung von Animationen basierend auf der Scroll-Position des Benutzers können Sie Benutzer begeistern und Ihre Website visuell ansprechender gestalten.

In der Vergangenheit musste man auf das Scroll-Ereignis im Hauptthread reagieren, um scrollgesteuerte Animationen zu erstellen. Dies führte jedoch zu zwei Hauptproblemen:

1. Das Scrollen wurde in einem separaten Prozess ausgeführt, was zu asynchronen Scroll-Ereignissen führte.
2. Animationen im Hauptthread waren anfällig für Ruckeln.

Dies erschwerte die Umsetzung von performanten scrollgesteuerten Animationen, die flüssig und synchron zum Scrollen ablaufen.

Wir stellen nun eine neue Reihe von APIs vor, die scrollgesteuerte Animationen unterstützen und sowohl in CSS als auch in JavaScript verwendet werden können. Diese APIs wurden entwickelt, um die Ressourcen des Hauptthreads so wenig wie möglich zu beanspruchen und die Implementierung von scrollgesteuerten Animationen deutlich zu vereinfachen. Dadurch wird eine flüssigere Darstellung der Animationen ermöglicht. Die scrollgesteuerten Animations-APIs werden derzeit von den folgenden Browsern unterstützt:

• Chrome 115 (Unterstützt)
• Firefox 110 (Hinter einer Flagge)
• Edge 115 (Unterstützt)
• Safari (Nicht unterstützt)

In diesem Artikel vergleichen wir den neuen Ansatz mit der klassischen JavaScript-Technik, um zu zeigen, wie einfach und flüssig scrollgesteuerte Animationen mit den neuen APIs sein können.

Die scrollgesteuerte Animations-CSS-API im Vergleich zu klassischem JavaScript

Früher musste man das Scroll-Ereignis abfangen und den Fortschritt basierend auf der gescrollten Höhe berechnen. Hier ist ein Beispiel für die klassische JavaScript-Technik:

document.addEventListener("scroll", () => {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100; 
  document.getElementById("progress").style.width = scrolled + "%";
})

Die neue scrollgesteuerte Animations-CSS-API bietet einen einfacheren und effizienteren Ansatz. Hier ist ein Beispiel für eine Fortschrittsbalken-Animation mit CSS:

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

#progress {
  animation: grow-progress auto linear forwards;
  animation-timeline: scroll(block root);
}

Die neue CSS-Funktion "animation-timeline" wandelt automatisch die Scroll-Position in einen Fortschrittsprozentsatz um und übernimmt somit die Berechnung für Sie.

Ein großer Vorteil der neuen APIs besteht darin, dass sie auch mit intensiven JavaScript-Berechnungen problemlos umgehen können, ohne die Flüssigkeit der Animationen zu beeinträchtigen. Im Gegensatz dazu führt die klassische JavaScript-Version aufgrund der intensiven Berechnungen auf dem Hauptthread zu Ruckeln und einer träge wirkenden Animation. Die CSS-Version hingegen bleibt von diesen Berechnungen unberührt und reagiert weiterhin flüssig auf die Scroll-Interaktionen des Benutzers.

Die neue scrollgesteuerte Animations-JavaScript-API im Vergleich zu klassischem JavaScript

Der Vorteil der neuen API beschränkt sich nicht nur auf CSS. Sie ermöglicht auch mit JavaScript extrem flüssige scrollgesteuerte Animationen. Hier ist ein Beispiel:

const progressbar = document.querySelector('#progress');
progressbar.style.transformOrigin = '0% 50%';
progressbar.animate(
  {
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    fill: 'forwards',
    timeline: new ScrollTimeline({
      source: document.documentElement,
    }),
  }
);

Mit dieser JavaScript-API können Sie dieselbe flüssige Fortschrittsbalken-Animation wie im vorherigen CSS-Demo nur mit JavaScript erstellen. Die zugrunde liegende Technologie ist dieselbe wie bei der CSS-Version. Die API versucht, die Ressourcen des Hauptthreads so wenig wie möglich zu nutzen, um im Vergleich zum klassischen JavaScript-Ansatz flüssigere Animationen zu ermöglichen.

Ferner funktioniert diese neue API in Verbindung mit der vorhandenen Web Animations API (WAAPI) und der CSS Animations API, um deklarative scrollgesteuerte Animationen zu ermöglichen.

Fazit

Die Einführung der neuen scrollgesteuerten Animations-APIs markiert einen bedeutenden Fortschritt für die Erstellung beeindruckender und flüssiger Animationen auf Websites und Webanwendungen. Durch die Nutzung dieser APIs können Entwickler nun scrollgesteuerte Animationen mit Leichtigkeit implementieren und gleichzeitig eine hohe Leistung und reibungslose Darstellung gewährleisten.

Früher musste man auf das Scroll-Ereignis im Hauptthread reagieren, was zu asynchronen Scroll-Ereignissen und Ruckeln führte. Dank der neuen scrollgesteuerten Animations-APIs können Animationen nun mit CSS oder JavaScript umgesetzt werden, wobei der Hauptthread möglichst entlastet wird. Dies führt zu flüssigen und nahtlosen Animationen, die perfekt mit dem Scrollen synchronisiert sind.

Die Vergleichsstudie zwischen der klassischen JavaScript-Technik und der neuen CSS-API verdeutlicht die Vorteile der neueren Methode. Während die JavaScript-Version aufgrund von intensiven Berechnungen auf dem Hauptthread Ruckeln und Verzögerungen aufweist, bleibt die CSS-Version davon unberührt und reagiert weiterhin reibungslos auf die Scroll-Interaktionen der Benutzer.

Die Verfügbarkeit der scrollgesteuerten Animations-APIs variiert derzeit je nach Browser. Chrome und Edge bieten bereits umfangreiche Unterstützung, während Firefox die APIs noch hinter einer Flagge verbirgt und Safari bisher keine Unterstützung bietet. Entwickler sollten die Kompatibilität der APIs bei der Planung und Umsetzung ihrer Projekte berücksichtigen.

Insgesamt bieten die neuen scrollgesteuerten Animations-APIs eine aufregende Möglichkeit, Websites und Webanwendungen mit ansprechenden Animationen zum Leben zu erwecken. Mit der Einfachheit der Implementierung und der verbesserten Leistung können Entwickler ihre Kunden mit beeindruckenden und reibungslosen Benutzererfahrungen begeistern. Wir freuen uns auf die weiteren Entwicklungen in der Web-Animations-Technologie und die zahlreichen Möglichkeiten, die sich dadurch eröffnen, um die Nutzererfahrung im Web weiter zu verbessern.