Ein Überblick über Scroll-Technologien

Scroll-bezogene Animationen werden im Web schon seit Jahren eingesetzt. In den letzten Jahren sind sie immer häufiger geworden, was zum Teil daran liegen mag, dass die Geräte leistungsfähiger geworden sind und somit mehr Animationen verarbeiten können. 

Es gibt eine Reihe von scrollbezogenen Technologien, daher zielt dieser Artikel darauf ab, einen Überblick über diese zu geben und Werkzeuge bereitzustellen, die Ihnen bei der Auswahl der richtigen helfen. Ich würde argumentieren, dass diese Technologien in zwei breite Kategorien unterteilt werden können: solche für spezifische scrollbezogene Verhaltensweisen und solche für allgemeinere scrollbezogene Verhaltensweisen.

Technologien für spezifische scrollbezogene Verhaltensweisen

Es gibt einige einfache native CSS-Scroll-Effekte, die von modernen Browsern unterstützt werden. In einigen begrenzten Anwendungsfällen können sie für Ihre Scroll-Animationsbedürfnisse ausreichend sein.

position: sticky;

Wenn Sie nur möchten, dass ein Element für einen Teil der Seite beim Scrollen an derselben Stelle bleibt, ist die Verwendung von position: sticky eine gute Option. Es ist unkompliziert und in modernen Browsern integriert. Allerdings ist für die IE-Unterstützung und einige mobile Browser ein Polyfill erforderlich. Für einen soliden Überblick lesen Sie diesen Artikel von Preethi.

CSS-Parallax

Das ist weniger eine Technologie als vielmehr eine Technik, aber sie ist ziemlich nützlich für einfache Parallax-Effekte, bei denen Sie möchten, dass sich verschiedene Teile der Seite beim Scrollen mit unterschiedlichen Geschwindigkeiten bewegen. Es gibt eine gute Abhandlung der Technik bei DigitalOcean und viele Beispiele auf CodePen, wie dieser Firewatch-Header. Der größte Nachteil für mich ist, dass es schwierig ist zu verstehen, welche Werte für die Perspektive und Transformationen verwendet werden müssen, um den Parallax-Effekt genau richtig hinzubekommen.

CSS-Scroll-Snap-Punkte

Scroll-Snap-Punkte ermöglichen es dem Browser, nach Abschluss des normalen Scrollens zu bestimmten von Ihnen festgelegten Scroll-Positionen zu springen. Dies kann hilfreich sein, um bestimmte Elemente im Blick zu behalten. Allerdings ist die API noch im Fluss, seien Sie also vorsichtig, die aktuellste API zu verwenden, und seien Sie vorsichtig, sich in der Produktion darauf zu verlassen. Dieser CSS-Tricks-Artikel von Max Kohler ist derzeit ein guter Ort, um mehr darüber zu erfahren.

Sanftes Scrollen

Sanftes Scrollen wird nativ unterstützt, wenn Sie mit window.scrollTo() in JavaScript oder sogar mit der scroll-behavior-Eigenschaft in CSS von Abschnitt zu Abschnitt innerhalb einer Seite springen. Allgemeines sanftes Scrollen, das Mausradaktionen glättet, wird derzeit nicht von allen Browsern nativ unterstützt. Es gibt verschiedene JavaScript-Bibliotheken, die versuchen, eine Unterstützung für sanftes Scrollen für die Mausradaktion hinzuzufügen, aber ich habe noch keine gefunden, die fehlerfrei ist und gut mit allen anderen Scroll-Technologien zusammenarbeitet. Außerdem ist sanftes Scrollen nicht immer gut.

Technologien für allgemeine Scroll-Verhaltensweisen

Derzeit gibt es keine Möglichkeit, allgemeine Animationen basierend auf der Scroll-Position nur mit CSS zu erstellen oder auszulösen (obwohl es einen Vorschlag gibt, der in ferner Zukunft eine Form von allgemeinen scrollbasierten Animationen in CSS unterstützen könnte) oder durch einen Teil einer Animation zu "scruppen". Daher müssen Sie, wenn Sie Elemente beim Scrollen animieren möchten, mindestens etwas JavaScript verwenden, um den gewünschten Effekt zu erzielen. Es gibt zwei breite Methoden, JavaScript zu verwenden, um Animationen beim Scrollen auszulösen: die Verwendung von Intersection Observers und die Verwendung des scroll-Ereignisses.

IntersectionObserver

Intersection Observers sind großartig, wenn Sie für Ihre Animationen nur Informationen darüber benötigen, ob und wie viel eines Elements im Ansichtsfenster sichtbar ist. Dies macht sie zu einer guten Option für Reveal-Animationen. Selbst dann sind einige Dinge mit Intersection Observers schwierig (wenn auch nicht unmöglich), wie z. B. das Auslösen unterschiedlicher Animationen je nach Richtung, in der ein Element in das Ansichtsfenster eintritt. Intersection Observers sind auch nicht sehr hilfreich, wenn Sie Scroll-Animationen durchführen möchten, wenn sich ein Element dazwischen befindet und nicht mit den Start- und Endpunkten überlappt. 

Verwendung des scroll-Ereignisses

Die Verwendung des Scroll-Ereignisses bietet Ihnen die größte Freiheit bei der Steuerung von Animationen beim Scrollen. Es ermöglicht Ihnen, ein Element beim Scrollen zu beeinflussen, unabhängig davon, wo es sich im Ansichtsfenster befindet, und Start- und Endpunkte genau so einzurichten, wie Sie es für Ihr Projekt benötigen. 

Das bedeutet jedoch, dass es leistungslastig sein kann, wenn es nicht richtig gedrosselt wird und keine praktische API zur Erstellung bestimmter Verhaltensweisen bietet. Deshalb ist es oft hilfreich, eine gute Scroll-Bibliothek zu verwenden, die die Drosselung für Sie übernimmt und Ihnen eine praktischere API zur Verfügung stellt. Einige können sogar viele der Probleme mit der Größenänderung für Sie lösen!

Werkzeuge zur Erstellung allgemeiner Scroll-Verhaltensweisen

Es gibt einige umfassende Scroll-Bibliotheken, die versuchen, Ihnen die volle Kontrolle über Animationen beim Scrollen zu geben, ohne dass Sie alle Berechnungen selbst durchführen müssen. 

ScrollMagic

ScrollMagic bietet eine relativ einfache API zur Erstellung verschiedener Effekte beim Scrollen und kann mit verschiedenen Animationsbibliotheken wie GSAP und Velocity.js verknüpft werden. Allerdings wurde es in den letzten Jahren weniger gepflegt, was zur Entstehung von ScrollScene führte.

ScrollScene

ScrollScene ist im Wesentlichen ein Wrapper, der versucht, ScrollMagic und/oder den Intersection Observer benutzerfreundlicher zu gestalten. Es verwendet eine benutzerdefinierte, besser gepflegte Version von ScrollMagic und fügt zusätzliche Funktionen wie Videowiedergabe, Szenen-Init-Breakpoints und Szenen-Dauer-Breakpoints hinzu. Es nutzt auch GSAP. 

ScrollTrigger

ScrollTrigger ist ein offizielles GreenSock-Plugin für GSAP. Es hat eine lange Liste von Funktionen und die am einfachsten zu bedienende API aller Scroll-Bibliotheken (zumindest für mich). Damit können Sie vollständig definieren, wo Ihre Scroll-Animationen beginnen und enden, alles (WebGL, Canvas, SVG, DOM, was auch immer) beim Scrollen animieren, Elemente während der Ausführung der Animation an Ort und Stelle fixieren und vieles mehr. Sie können es sogar mit sanften Scroll-Bibliotheken verknüpfen und sie werden großartig zusammenarbeiten. Außerdem hat es die Unterstützung von GreenSock und die GreenSock-Foren. 

Erwähnenswert: Locomotive Scroll

Obwohl es nicht versucht, eine so umfassende Scroll-Bibliothek wie die oben genannten zu sein, konzentriert sich Locomotive Scroll darauf, benutzerdefiniertes sanftes Scrollen zu bieten. Sie können auch bestimmte Eigenschaften von DOM-Objekten animieren, indem Sie Datenattribute hinzufügen oder das onscroll-Ereignis verwenden, um andere Objekttypen zu animieren. 

Zusammenfassung

Für einige spezielle Scroll-Animations-Effekte wie Sticky-Positionierung und Parallax können CSS-Technologien ausreichend sein, zumindest wenn Sie einen Polyfill für Browser verwenden, die diese Eigenschaften nicht unterstützen.

Ich empfehle generell die Verwendung von GSAPs ScrollTrigger, da es alles kann, was CSS-Eigenschaften können, und noch viel mehr. ScrollTrigger kümmert sich um die Browserunterstützung und die Berechnungen, damit Sie sich auf die Animation konzentrieren können!

Hier ist eine Tabelle, die abdeckt, welche Werkzeuge Sie zur Erstellung bestimmter Effekte verwenden können

	ScrollTrigger	Locomotive Scroll	ScrollScene	ScrollMagic	Intersection Observers	Sanftes Scrollen	CSS-Scroll-Snap-Punkte	CSS-Parallax	position: sticky
Fixieren	✅	⚪️	✅	✅	❌	❌	❌	❌	✅
Parallax-Effekte	✅	✅	✅	✅	❌	❌	❌	✅	❌
Animation mit Easing durchlaufen	✅	⚪️	⚪️	⚪️	⚪️	❌	❌	⚪️	❌
Scroll-Position fixieren	✅	⚪️	⚪️	⚪️	⚪️	❌	✅	❌	❌
Sanftes Scrollen	⚪️	✅	❌	❌	❌	✅	❌	❌	❌
Dynamisches Stapeln / Staffeln	✅	❌	✅	❌	✅	❌	❌	❌	❌
Unterstützt horizontale Scroll-Effekte	✅	✅	✅	✅	✅	✅	✅	✅	✅

Hier ist eine Tabelle, die verschiedene andere Aspekte der Scroll-Technologie vergleicht

	ScrollTrigger	Locomotive Scroll	ScrollScene	ScrollMagic	Intersection Observers	Sanftes Scrollen	CSS-Scroll-Snap-Punkte	CSS-Parallax	position: sticky
Verwendbar in der Produktion (gute Browserunterstützung)	✅	⚪️	✅	✅	⚪️	⚪️	⚪️	✅	⚪️
Vollständige Freiheit bei der Animation	✅	⚪️	✅	✅	❌	❌	❌	❌	❌
Gepflegt	✅	✅	✅	❌	n/a	n/a	n/a	n/a	n/a
Funktioniert mit DOM, Canvas, WebGl, SVG	✅	⚪️	✅	✅	✅	❌	❌	❌	❌
Funktioniert problemlos mit Größenänderung	✅	✅	✅	⚪️	✅	✅	✅	✅	✅
Beschränkt Animation auf den relevanten Bereich	✅	❌	⚪️	⚪️	✅	✅	✅	❌	✅
Richtungsbewusst	✅	⚪️	✅	✅	⚪️	❌	❌	❌	❌
Native Technologie	❌	❌	❌	❌	✅	✅	✅	✅	✅