Eine Fallstudie zu scrollbaren Animationen

Yuriko Hirota

Was gibt es Neues bei scrollbasierten Animationen?

Scroll-animierte Elemente sind eine Möglichkeit, Ihrer Website oder Webanwendung Interaktivität und visuelles Interesse hinzuzufügen. Sie werden durch die Scrollposition des Nutzers ausgelöst. So können Sie das Interesse der Nutzer aufrechterhalten und Ihre Website visuell ansprechender gestalten.

Bisher war die einzige Möglichkeit, scrollgesteuerte Animationen zu erstellen, die Reaktion auf das Scrollereignis im Hauptthread. Das führte zu zwei großen Problemen:

• Das Scrollen wird in einem separaten Thread ausgeführt und liefert daher Scroll-Ereignisse asynchron.
• Animationseffekte im Hauptthread können zu Rucklern führen.

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

Wir führen jetzt neue APIs ein, um scrollbare Animationen zu unterstützen, die Sie aus CSS oder JavaScript verwenden können. Die API versucht, so wenige Hauptthreadressourcen wie möglich zu verwenden. Dadurch lassen sich scrollbare Animationen viel einfacher implementieren und deutlich flüssiger machen. Die Scroll-gesteuerte Animations-API 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 scrollbasierte Animationen mit der neuen API sein können.

Die CSS API mit scrollbaren Animationen im Vergleich zum klassischen JavaScript

Die folgende Beispiel-Prognoseanzeige wurde mit JavaScript-Klassentechniken erstellt.

Das Dokument reagiert jedes Mal, wenn das Ereignis scroll auftritt, um zu berechnen, zu welchem Prozentsatz der 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 dieselbe Fortschrittsanzeige 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);
}

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

Jetzt kommt der interessante Teil. Nehmen wir an, Sie haben eine sehr aufwendige Berechnung auf beiden Versionen der Website implementiert, die die meisten Ressourcen des Hauptthreads aufbrauchen würde.

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

Wie Sie vielleicht erwartet haben, wird die klassische JavaScript-Version aufgrund der Ressourcen-Verbindung des Hauptthreads langsam und langsam. Andererseits ist die CSS-Version völlig unabhängig von der aufwendigen JavaScript-Arbeit und kann auf die Scroll-Interaktionen des Nutzers reagieren.

Die CPU-Nutzung ist in den Entwicklertools völlig anders, wie in den folgenden Screenshots dargestellt.

Die folgende Demo zeigt eine Anwendung einer scrollbaren Animation, die von CyberAgent erstellt wurde. Sie sehen, dass das Foto beim Scrollen einblendet wird.

Neue Scroll-gesteuerte Animationen JavaScript API im Vergleich zum klassischen JavaScript

Die Vorteile der neuen API sind nicht nur auf Preisvergleichsportale beschränkt. Sie können mit JavaScript auch sanfte, flüssige Scroll-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 die in der vorherigen CSS-Demo gezeigte Fortschrittsanzeige-Animation mit nur JavaScript erstellen. Die zugrunde liegende Technologie entspricht der CSS-Version. Die API versucht, so wenige Hauptthreadressourcen wie möglich zu verwenden, wodurch die Animationen im Vergleich zum klassischen JavaScript-Ansatz weitaus flüssiger werden.

Außerdem funktioniert die neue API in Verbindung mit der vorhandenen Web Animations API (WAAPI) und der CSS Animations API, um deklarative, scrollbare Animationen zu ermöglichen.

Weitere Demos und Ressourcen

Auf dieser Demo-Website können Sie sich die verschiedenen Implementierungen von Scroll-Animationen ansehen. Dort können Sie Demos mit den neuen APIs von CSS und JavaScript vergleichen.

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