Eine Fallstudie zu scrollbaren Animationen

Yuriko Hirota

Neuerungen bei scrollgesteuerten Animationen

Scrollgesteuerte Animationen sind eine Möglichkeit, Ihrer Website oder Webanwendung Interaktivität und visuelle Elemente hinzuzufügen, die durch die Scrollposition des Nutzers ausgelöst werden. So können Sie Nutzer besser einbinden und Ihre Website optisch ansprechender gestalten.

Bisher konnten scrollgesteuerte Animationen nur durch Reaktionen auf das Scrollereignis im Hauptthread erstellt werden. Das führte zu zwei großen Problemen:

• Das Scrollen erfolgt in einem separaten Thread und liefert daher asynchrone Scrollereignisse.
• Animationen im Hauptthread sind anfällig für Ruckeln.

Dadurch ist es unmöglich oder sehr schwierig, leistungsstarke scrollgesteuerte Animationen zu erstellen, die mit dem Scrollen synchronisiert sind.

Wir führen jetzt eine neue Reihe von APIs ein, die scrollgesteuerte Animationen unterstützen und die Sie über CSS oder JavaScript verwenden können. Die API versucht, so wenige Hauptthread-Ressourcen wie möglich zu verwenden. Dadurch lassen sich scrollgesteuerte Animationen viel einfacher und reibungsloser implementieren. Die API für scrollgesteuerte Animationen wird derzeit in den folgenden Browsern unterstützt:

In diesem Artikel wird der neue Ansatz mit der klassischen JavaScript-Technik verglichen, um zu zeigen, wie einfach und reibungslos scrollgesteuerte Animationen mit der neuen API sein können.

Die CSS API für scrollgesteuerte Animationen im Vergleich zu klassischem JavaScript

Die folgende Fortschrittsanzeige wurde mit klassischen JavaScript-Techniken erstellt.

Das Dokument reagiert jedes Mal, wenn das scroll-Ereignis eintritt, um zu berechnen, wie viel Prozent des scrollHeight der Nutzer gescrollt hat.

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 + "%";
})

In der folgenden Demo wird dieselbe Fortschrittsanzeige mit der neuen API und CSS angezeigt.

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

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

Mit dem neuen animation-timeline CSS-Feature wird eine Position in einem Scrollbereich automatisch in einen Prozentsatz des Fortschritts umgewandelt. Dadurch wird die gesamte schwere Arbeit erledigt.

Jetzt kommt der interessante Teil: Angenommen, Sie haben in beiden Versionen der Website eine sehr aufwendige Berechnung implementiert, die die meisten Ressourcen des Hauptthreads beansprucht.

function someHeavyJS(){
  let time = 0;
  window.setInterval(function () {
    time++;
    for (var i = 0; i < 1e9; i++) {
      result = i;
    }
    console.log(time)
  }, 100);
}

Wie erwartet wird die klassische JavaScript-Version aufgrund der Überlastung der Hauptthread-Ressourcen ruckelig und langsam. Die CSS-Version ist dagegen von der aufwendigen JavaScript-Arbeit völlig unbeeinflusst und kann auf die Scrollinteraktionen des Nutzers reagieren.

Die CPU-Auslastung ist in den Entwicklertools völlig anders, wie in den folgenden Screenshots zu sehen ist.

Die folgende Demo zeigt eine von CyberAgent erstellte scrollgesteuerte Animation. Sie sehen, dass das Foto beim Scrollen eingeblendet wird.

Neue JavaScript API für scrollgesteuerte Animationen im Vergleich zu klassischem JavaScript

Die Vorteile der neuen API sind nicht auf CSS beschränkt. Sie können auch mit JavaScript reibungslose scrollgesteuerte Animationen erstellen. Sehen Sie sich das folgende Beispiel an:

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,
    }),
  }
);

So können Sie dieselbe Fortschrittsanimation wie in der vorherigen CSS-Demo nur mit JavaScript erstellen. Die zugrunde liegende Technologie ist dieselbe wie bei der CSS-Version. Die API versucht, so wenige Hauptthread-Ressourcen wie möglich zu verwenden. Dadurch sind die Animationen im Vergleich zum klassischen JavaScript-Ansatz viel reibungsloser.

Außerdem 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.

Weitere Demos und Ressourcen

Auf dieser Demowebsite können Sie sich die verschiedenen Implementierungen von scrollgesteuerten Animationen ansehen und Demos mit diesen neuen APIs aus CSS und JavaScript vergleichen.

Weitere Informationen zu den neuen scrollgesteuerten Animationen finden Sie in diesem Artikel und im Vortrag auf der Google I/O 2023.