Eine Fallstudie zu scrollbaren Animationen

Yuriko Hirota

Neuigkeiten bei scrollgesteuerten Animationen

Scrollgesteuerte Animationen sind eine Möglichkeit, Ihrer Website oder Webanwendung Interaktivität und visuelles Interesse zu verleihen. Sie werden durch die Scrollposition des Nutzers ausgelöst. So können Sie die Nutzerbindung steigern und Ihre Website optisch ansprechender gestalten.

Bisher konnten scrollgesteuerte Animationen nur durch Reagieren auf das Scroll-Ereignis im Hauptthread erstellt werden. Dies führte zu zwei großen Problemen:

• Das Scrollen erfolgt in einem separaten Thread und liefert daher Scroll-Ereignisse asynchron.
• Animationen im Hauptthread können ruckeln.

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

Wir führen jetzt neue APIs ein, die scrollgesteuerte Animationen unterstützen und die Sie über CSS oder JavaScript verwenden können. Die API versucht, so wenige Ressourcen des Hauptthreads wie möglich zu verwenden. Dadurch lassen sich scrollgesteuerte Animationen viel einfacher und flüssiger 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 flüssig scrollgesteuerte Animationen mit der neuen API sein können.

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

Die folgende Fortschrittsanzeige wird mit klassenbasierten JavaScript-Techniken erstellt.

Das Dokument reagiert jedes Mal, wenn das Ereignis scroll 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 + "%";
})

Die folgende Demo zeigt denselben Fortschrittsbalken mit der neuen API und CSS.

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

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

Das neue CSS-Feature animation-timeline wandelt eine Position in einem Scrollbereich automatisch in einen prozentualen Fortschritt um.

Nehmen wir an, Sie haben eine sehr rechenintensive Berechnung in beiden Versionen der Website 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 Ressourcenverknüpfung im Hauptthread ruckelig und langsam. Die CSS-Version ist dagegen von der JavaScript-Arbeit völlig unbeeinflusst und kann auf die Scrollinteraktionen des Nutzers reagieren.

Die CPU-Auslastung in den DevTools ist jedoch eine ganz andere, wie in den folgenden Screenshots zu sehen ist.

In der folgenden Demo sehen Sie 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 nur auf Preisvergleichsportale beschränkt. Mit JavaScript lassen sich auch flüssige, scrollgesteuerte Animationen erstellen. Hier 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,
    }),
  }
);

So können Sie die gleiche Fortschrittsbalkenanimation wie in der vorherigen CSS-Demo nur mit JavaScript erstellen. Die zugrunde liegende Technologie ist dieselbe wie bei der Version für Preisvergleichsportale. Die API versucht, so wenige Ressourcen des Hauptthreads wie möglich zu verwenden. Dadurch sind die Animationen im Vergleich zum klassischen JavaScript-Ansatz viel flüssiger.

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.

Wenn Sie mehr über die neuen scrollbasierten Animationen erfahren möchten, sehen Sie sich diesen Artikel an und diesen Vortrag auf der I/O 2023.