Scroll-Animationen sind ein gängiges UX-Muster im Web. Eine scrollbare Animation ist mit der Scrollposition eines Scrollcontainers verknüpft. Das bedeutet, dass die verknüpfte Animation beim Scrollen nach oben oder unten als Direct Response vor- oder zurückspult wird. Beispiele dafür sind Effekte wie Parallaxe-Hintergrundbilder oder Leseanzeigen, die sich beim Scrollen bewegen.
Entwickler haben in der Regel scrollbare Animationen mithilfe von JavaScript erstellt, um auf Scroll-Ereignisse im Hauptthread zu reagieren. Dies erschwert die Erstellung leistungsstarker scrollbarer Animationen, die mit dem Scrollen synchron sind, da Scroll-Ereignisse asynchron bereitgestellt werden. Dies führt häufig zu Verzögerungen aufgrund von Verzögerungen im Hauptthread.
Im Rahmen der neuen CSS- und UI-Funktionen, die in Browsern verfügbar sind, kannst du jetzt deklarative scrollgesteuerte Animationen erstellen. Mit Scroll-Zeitachsen und Ansicht-Zeitachsen, neuen Konzepten, die sich in die bestehende Web Animations API (WAAPI) und die CSS Animations API integrieren lassen, können Sie jetzt mit nur wenigen Codezeilen unterbrechungsfreie, scrollbare Animationen ausführen. In dieser Fallstudie erfahren Sie, wie Tokopedia, redBus und Policybazaar bereits von dieser neuen Funktion profitieren.
Tokopedia
Tokopedia ersetzte seine früheren benutzerdefinierten JavaScript-Implementierungen durch scrollgesteuerte Animationen, um die Seitenleistung zu optimieren und das Surfen im gesamten E-Commerce-Conversion-Trichter zu verbessern.
Wir konnten bis zu 80% unserer Codezeilen im Vergleich zu herkömmlichen JavaScript-Scrollereignissen reduzieren und stellten fest, dass die durchschnittliche CPU-Nutzung beim Scrollen von 50% auf 2% reduziert wurde. Andy Wihalim, Seior Software Engineer, Tokopedia
Code
Bei der folgenden Implementierung wird die Funktion scroll() verwendet, um eine anonyme Zeitleiste für den Scrollfortschritt festzulegen, mit der der Fortschritt der CSS-Animation gesteuert wird. Die Sichtbarkeit der oberen fixierten Leiste ändert sich je nach Scrollposition innerhalb der definierten animationRange.
const toggleBar = keyframes({
to: { height: 48 },
});
export const cssWrapper = css({
position: 'fixed',
left: 0,
width: '100vw',
pointerEvents: 'none',
marginTop: 120,
height: 0,
overflow: 'hidden',
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-end',
animation: `${toggleBar} linear both`,
animationTimeline: 'scroll()',
animationRange: '20px 70px',
});
redBus
redBus hat auf der Landingpage für Aufgaben unterschiedliche Animationen für Mobilgeräte und Computer, die allen Nutzern zu Beginn des Conversion-Trichters angezeigt werden. Mit scrollbaren Animationen konnten sie diese benutzerdefinierten JavaScript-Implementierungen durch CSS ersetzen, um denselben Effekt zu erzielen.
Anwendungsfälle
Fotogalerie mit Image Reveal (für Mobilgeräte) und Cover Flow (für Computer)
Code (Mobilgeräte)
Im vorherigen Beispiel hat Tokopedia die anonyme Zeitachse für den Scrollfortschritt verwendet. Im folgenden Code verwendet redBus die benannte Zeitachse für den Fortschritt der Ansicht. In der Animation werden opacity und clip-path des Elements <img> innerhalb des definierten animation-range innerhalb des nächstgelegenen Ancestor-Scrollers des Elements geändert. In diesem Fall ist das der Scroller der Fotogalerie.
const reveal = keyframes`
from {
opacity: 0;
clip-path: inset(45% 20% 45% 20%);
}
to {
opacity: 1;
clip-path: inset(0% 0% 0% 0%);
}`
const CardImage = styled.div`
width: 100%;
height: 100%;
img {
border-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
height: 100%;
width: 100%;
object-fit: cover;
view-timeline-name: --revealing-image;
view-timeline-axis: block;
/* Attach animation, linked to the View Timeline */
animation: linear ${reveal} both;
animation-timeline: --revealing-image;
/* Tweak range when effect should run*/
animation-range: entry 25% cover 50%;
}
`;
Wir freuen uns sehr über diese Funktion, da sie die perfekte Mischung aus Leistung und Nutzerfreundlichkeit bietet und unsere Signale für die Nutzerfreundlichkeit von Seiten für die SEO verstärkt. Darüber hinaus macht sie dank der minimalen Lernkurve zu einem Must-have für jede E-Commerce-Website. Außerdem haben wir positives Feedback und Unterstützung von anderen Teams erhalten, um die SDA für mehr User Journeys zu nutzen: Amit Kumar, Senior Engineering Manager bei redBus.
PolicyBazaar
Der Vergleich von Versicherungsplänen ist eine wiederholte Hauptaktion, die von Nutzern zur Steuerung des Entscheidungsfindungsprozesses ausgeführt wird. Policybazaar reduzierte mithilfe von scrollgesteuerten Animationen die Größe von Elementen mit niedriger Priorität als Reaktion, wenn der Nutzer in der Tabelle scrollt. Dies führte zu einem reibungslosen Scrollen bei gleichzeitig besserer Lesbarkeit.
Mit scrollbaren Animationen konnten wir den Darstellungsbereich für den Nutzer maximieren, um Pläne zu vergleichen, und so eine übersichtliche und übersichtliche Lektüre zu ermöglichen. – Rishabh Mehrotra, Head of Design for Life Insurance BU, PolicyBazaar
animate-timeline in der Tabelle „Vergleichspläne“ in der Geschäftssparte „Investition“ und „Leben“ (Line of Business).Code
Ähnlich wie im vorherigen Beispiel von Tokopedia verwendet Policybazaar die Funktion scroll(), um eine anonyme Zeitachse für den Scrollfortschritt festzulegen, um den Fortschritt der CSS-Animation zu steuern. In diesem Fall wird die Schriftgröße verkleinert und der Header basierend auf der Scrollposition innerhalb des definierten animation-range ausgeblendet.
@supports (animation-timeline: scroll()) {
.plan-comparison .inner-header {
animation: move-and-fade-header linear both;
}
.plan-comparison .left-side {
animation: shrink-name linear both;
}
.plan-comparison .inner-header, .plan-comparison .left-side {
animation-timeline: scroll();
animation-range: 0 150px;
}
}
@keyframes move-and-fade-header {
to {
translate: 0% -5%;
top:103px;
}
}
@keyframes shrink-name {
to {
font-size: 1.5rem;
}
}
Scroll-Animationen als gemeinsames Muster während der User Journey
Alle vorgestellten E-Commerce-Unternehmen nutzten Scroll-Animationen auf Seiten mit Karten und animierten Infokarten, um die Aufmerksamkeit der Nutzer auf sie zu lenken . Die folgenden Beispiele zeigen Scrolleffekte auf Karten in verschiedenen Teilen des Kaufprozesses. Dazu wird in der Regel eine anonyme Fortschrittszeitachse verwendet, um den Fortschritt der benutzerdefinierten CSS-Animation zu steuern, wie im folgenden CSS-Snippet gezeigt.
@keyframes animate-in {
0% { opacity: 0; transform: translateY(10%); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes animate-out {
0% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-10%); }
}
.flyin_animate {
animation: animate-in linear forwards;
animation-timeline: view();
animation-range: entry;
}
redBus (Startseite)
PolicyBazaar (Seite mit Produkteinträgen)
Tokopedia (Seite mit Produktdetails)
Was bei der Verwendung der Scroll-driven Animations API zu beachten ist
Es ist möglich, scrollbare Animationen mit Polyfill für nicht unterstützte Browser zu verwenden, z. B. mit dem Polyfill für die Scroll-Zeitachse. In diesem Fall sind zusätzliche Tests erforderlich, um sicherzustellen, dass es gut mit Ihrem Framework funktioniert und dass Browser, die Polyfill verwenden, keine Animationsfehler oder Verzögerungen auftreten.
Über CSS können Sie mit @supports testen, ob die Animationszeitleiste unterstützt wird, bevor Sie scrollbare Animationen verwenden. Beispiel:
@supports (animation-timeline: scroll()) {
}
Ressourcen
- Demos für Scroll-Animationen
- Elemente beim Scrollen mit Scroll-Animationen animieren
- Codelab: Erste Schritte mit scrollbaren Animationen in CSS
- Chrome-Erweiterung: Debugger für scrollbare Animation
- Polyfill für die Scrollzeitleiste
- Möchtest du einen Fehler oder eine neue Funktion melden? Ihre Meinung ist uns wichtig.
In den anderen Artikeln dieser Reihe wird beschrieben, wie E-Commerce-Unternehmen von neuen CSS- und UI-Funktionen wie View Transitions, Popover, Containerabfragen und dem Selektor has() profitieren.