Fallstudien zu scrollbaren Animationen

Swetha Gopalakrishnan

Saurabh Rajpal

Scroll-animierte Elemente sind ein gängiges UX-Muster im Web. Eine scrollgesteuerte Animation ist mit der Scrollposition eines Scrollcontainers verknüpft. Das bedeutet, dass die verknüpfte Animation direkt in Reaktion darauf vor- oder zurückgescrollt wird, wenn Sie nach oben oder unten scrollen. Beispiele hierfür sind Effekte wie Paralax-Hintergrundbilder oder Leseanzeigen, die sich beim Scrollen bewegen.

Bisher haben Entwickler in der Regel Scroll-Animationen mit JavaScript erstellt, um auf Scrollereignisse im Hauptthread zu reagieren. Das macht es schwierig, leistungsstarke scrollbasierte Animationen zu erstellen, die mit dem Scrollen synchronisiert sind, da Scrollereignisse asynchron gesendet werden. Dies führt häufig zu Rucklern, da sich die Animationen im Hauptthread befinden.

Im Rahmen der neuen CSS- und UI-Funktionen, die in Browsern eingeführt werden, können Sie jetzt deklarative scrollbasierte Animationen erstellen. Mit Scroll- und Ansichtszeitachsen, neuen Konzepten, die in die vorhandene Web Animations API (WAAPI) und CSS Animations API eingebunden werden, können Sie jetzt mit nur wenigen Codezeilen flüssige scrollbasierte Animationen über den Hauptthread ausführen. In dieser Fallstudie erfahren Sie, wie Tokopedia, redBus und Policybazaar bereits von dieser neuen Funktion profitieren.

Tokopedia

Tokopedia ersetzte seine bisherigen benutzerdefinierten JavaScript-Implementierungen durch scrollbasierte Animationen, um die Seitenleistung zu optimieren und die allgemeine Browsererfahrung im gesamten E-Commerce-Conversion-Trichter zu verbessern.

Wir konnten die Anzahl der Codezeilen im Vergleich zu herkömmlichen JavaScript-Scroll-Ereignissen um bis zu 80% reduzieren. Außerdem sank die durchschnittliche CPU-Auslastung beim Scrollen von 50% auf 2 %. Andy Wihalim, Senior Software Engineer, Tokopedia

Code

In der folgenden Implementierung wird die Funktion scroll() verwendet, um eine anonyme Zeitachse für den Scrollvorgang festzulegen, mit der der Fortschritt der CSS-Animation gesteuert wird. Die Sichtbarkeit der oberen fixierten Leiste ändert sich je nach Scrollposition innerhalb des 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 verwendet auf der Landingpage für Mögliche Aktivitäten unterschiedliche Animationen für Mobilgeräte und Computer. Diese Seite wird allen Nutzern zu Beginn des Conversion-Trichters angezeigt. Mit scrollgesteuerten Animationen konnten sie diese benutzerdefinierten JavaScript-Implementierungen durch CSS ersetzen, um denselben Effekt zu erzielen.

Anwendungsfälle

Fotogalerie mit Bilder-Entfaltung (für Mobilgeräte) und Cover Flow (für Computer).

Code (Mobilgerät)

Im vorherigen Beispiel hat Tokopedia die Zeitachse für den anonymen Scrollvorgang verwendet. Im folgenden Code verwendet redBus die Zeitachse für den Fortschritt der benannten Ansicht. Bei der Animation werden die opacity und clip-path des <img>-Elements innerhalb des definierten animation-range im nächsten übergeordneten Scroller 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 eine perfekte Kombination aus Leistung und Nutzerfreundlichkeit bietet und unsere Signale zur Nutzerfreundlichkeit für die Suchmaschinenoptimierung verbessert. Außerdem ist die Lernkurve so gering, dass es für jede E-Commerce-Website ein Muss ist. Außerdem haben wir positives Feedback und Unterstützung von anderen Teams erhalten, die SDA für weitere User Journeys nutzen möchten. Amit Kumar, Senior Engineering Manager, redBus

Policybazaar

Der Vergleich von Versicherungsplänen ist eine wiederkehrende wichtige Aktion, die Nutzer bei ihrer Entscheidungsfindung unternehmen. Mithilfe von scrollgesteuerten Animationen verkleinerte Policybazaar die Größe von Elementen mit niedriger Priorität, wenn der Nutzer durch die Tabelle scrollte. Das führte zu einem flüssigen Scrollen und verbesserte gleichzeitig die Lesbarkeit.

Mit scrollgesteuerten Animationen konnten wir den Ansichtsbereich maximieren, damit Nutzer die Pläne vergleichen können. So wird eine konzentrierte und übersichtliche Leseerfahrung gewährleistet.—Rishabh Mehrotra, Head of Design for Life Insurance BU, PolicyBazaar.

Code

Ähnlich wie im vorherigen Beispiel von Tokopedia verwendet Policybazaar die Funktion scroll(), um einen anonymen Zeitplan für den Scrollvorgang festzulegen, um den Fortschritt der CSS-Animation zu steuern. In diesem Fall wird die Schriftgröße verkleinert und die Überschrift wird abhängig von der Scrollposition innerhalb der 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-basierte Animationen als gängiges Muster während der gesamten User Journey

Alle vorgestellten E-Commerce-Unternehmen haben auf Seiten mit Karten scrollbasierte Animationen verwendet, um die Aufmerksamkeit der Nutzer auf die Karten zu lenken . Die folgenden Beispiele zeigen Scrolleffekte auf Karten in verschiedenen Teilen des User Journeys. Normalerweise wird dazu eine Zeitachse für den Fortschritt der anonymen Wiedergabe 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 (Produktdetailseite)

Zu beachtende Punkte bei der Verwendung der Scroll-driven Animations API

Es ist möglich, scrollbasierte Animationen für nicht unterstützte Browser zu polyfillen, z. B. mit der Scroll-Zeitachse-Polyfill. In diesem Fall sind zusätzliche Tests erforderlich, um sicherzustellen, dass die polyfill gut mit Ihrem Framework funktioniert und dass in Browsern, die die polyfill verwenden, keine Animationsfehler auftreten oder die Nutzung hakelig ist.

Mit @supports können Sie in CSS prüfen, ob die Animations-Zeitachse unterstützt wird, bevor Sie scrollgesteuerte Animationen verwenden. Beispiel:

@supports (animation-timeline: scroll()) {

}

Ressourcen

• Demos für scrollbasierte Animationen
• Elemente beim Scrollen mit scrollbasierten Animationen animieren
• Codelab: Erste Schritte mit scrollbasierten Animationen in CSS
• Chrome-Erweiterung: Scroll-driven animation debugger
• Scroll-Timeline-Polyfill
• Möchten Sie einen Fehler melden oder eine neue Funktion vorschlagen? Ihre Meinung ist uns wichtig.

In den anderen Artikeln dieser Reihe erfahren Sie, wie E-Commerce-Unternehmen von neuen CSS- und UI-Funktionen wie Ansichtsübergängen, Pop-ups, Containerabfragen und der has()-Auswahl profitiert haben.

• Warum sind Web-UI-Funktionen für Ihre E-Commerce-Website wichtig?
• Fallstudien zu Transitions ansehen
• Fallstudien zur Popover API
• Fallstudien zu Containerabfragen
• Fallstudien zur Auswahl:has()