Eine Fallstudie zu scrollbaren Animationen

Yuriko Hirota
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 zu verleihen. Sie werden durch die Scrollposition des Nutzers ausgelöst. So können Sie die Nutzerbindung 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 daher werden Scrollereignisse asynchron gesendet.
  • 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, mit denen Sie scrollgesteuerte Animationen über CSS oder JavaScript unterstützen können. Die API versucht, so wenige Ressourcen wie möglich im Hauptthread zu verwenden. Dadurch lassen sich scrollbasierte Animationen viel einfacher und flüssiger implementieren. Die API für scrollbasierte Animationen wird derzeit in den folgenden Browsern unterstützt:

Unterstützte Browser

  • Chrome: 115.
  • Edge: 115.
  • Firefox: hinter einer Flagge.
  • Safari: Nicht unterstützt.

Quelle

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 scrollbasierte CSS-Animation API im Vergleich zu klassischem 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 und übernimmt damit die ganze Arbeit.

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 Sie sich vorstellen können, wird die klassische JavaScript-Version aufgrund der Ressourcenverbindung des Hauptthreads ruckelig und langsam. Die CSS-Version ist dagegen völlig unbeeinflusst von der intensiven JavaScript-Arbeit und kann auf die Scroll-Interaktionen des Nutzers reagieren.

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

Vergleich des Hauptthreads.

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

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

Die Vorteile der neuen API sind nicht nur auf Preisvergleichsportale beschränkt. Mit JavaScript können Sie auch flüssige scrollbasierte 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 ist mit der CSS-Version identisch. Die API versucht, so wenige Ressourcen wie möglich im Hauptthread zu verwenden, wodurch die Animationen im Vergleich zum klassischen JavaScript-Ansatz viel flüssiger ablaufen.

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

Weitere Demos und Ressourcen

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

Weitere Informationen zu den neuen scrollbasierten Animationen finden Sie in diesem Artikel und im Vortrag zur I/O 2023.