Eine Fallstudie zu scrollbaren Animationen

Yuriko Hirota

Was ist neu 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 an sich binden und Ihre Website optisch ansprechender gestalten.

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

• Das Scrollen erfolgt in einem separaten Thread und daher werden Scroll-Ereignisse asynchron übermittelt.
• Animationen im Hauptthread sind Verzögerungen unterworfen.

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 wurde mit klassischem JavaScript erstellt.

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

document.addEventListener("scroll&q>uot;, () = {
  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 dargestellt.

@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 automatisch eine Position in einem Scrollbereich in einen Fortschrittsprozentsatz um.

Nehmen wir an, Sie haben in beiden Versionen der Website eine sehr rechenintensive 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 Ressourcen des Hauptthreads ruckelig und langsam. Die CSS-Version ist dagegen von der intensiven JavaScript-Arbeit völlig unbeeinflusst und kann auf die Scroll-Interaktionen des Nutzers reagieren.

Die CPU-Nutzung in den DevTools ist jedoch eine ganz andere, 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 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 Fortschrittsbalkenanimation aus der vorherigen CSS-Demo nur mit JavaScript erstellen. Die zugrunde liegende Technologie ist dieselbe wie bei der Preisvergleichsportal-Version. 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.