Fallstudien zu scrollbaren Animationen

Swetha Gopalakrishnan

Saurabh Rajpal

Scroll-basierte Animationen sind ein häufiges UX-Muster im Web. Eine scrollgesteuerte Animation ist mit der Scrollposition eines Scroll-Containers verknüpft. Das bedeutet, dass die verknüpfte Animation beim Auf- oder Abscrollen direkt vor- oder zurückgespult wird. Beispiele hierfür sind Effekte wie Parallax-Hintergrundbilder oder Leseindikatoren, die sich beim Scrollen bewegen.

Bisher haben Entwickler in der Regel scrollgesteuerte Animationen mit JavaScript erstellt, um auf Scroll-Ereignisse im Hauptthread zu reagieren. Das macht es schwierig, leistungsstarke scrollgesteuerte Animationen zu erstellen, die mit dem Scrollen synchronisiert sind, da Scrollereignisse asynchron übermittelt werden. Außerdem führt es oft zu Rucklern, da sie im Hauptthread ausgeführt werden.

Im Rahmen der neuen CSS- und UI-Funktionen, die in Browsern eingeführt werden, können Sie jetzt jedoch deklarative scrollgesteuerte Animationen erstellen. Mit Scroll- und View-Timelines, neuen Konzepten, die in die bestehende Web Animations API (WAAPI) und die CSS Animations API integriert werden, können Sie jetzt mit nur wenigen Zeilen Code flüssige, scrollgesteuerte Animationen erstellen, die außerhalb des Hauptthreads ausgeführt werden. In dieser Fallstudie erfahren Sie, wie Tokopedia, redBus und Policybazaar bereits von dieser neuen Funktion profitieren.

Tokopedia

Tokopedia hat seine bisherigen benutzerdefinierten JavaScript-Implementierungen durch scrollgesteuerte Animationen ersetzt, um die Seitenleistung zu optimieren und das Browsing im E-Commerce-Conversion-Funnel insgesamt zu verbessern.

Wir konnten die Anzahl der Codezeilen im Vergleich zur Verwendung herkömmlicher JavaScript-Scrollereignisse um bis zu 80% reduzieren. Außerdem haben wir beobachtet, dass die durchschnittliche CPU-Auslastung beim Scrollen von 50% auf 2% gesunken ist. Andy Wihalim, Senior Software Engineer, Tokopedia

Code

Bei der folgenden Implementierung wird mit der Funktion scroll() eine anonyme Zeitachse für den Scrollfortschritt festgelegt, um den Fortschritt der CSS-Animation zu steuern. 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 Aktivitäten unterschiedliche Animationen für Mobilgeräte und Desktop-Computer, die allen Nutzern früh im Conversion-Trichter angezeigt werden. Mithilfe von scrollbasierten Animationen konnten sie diese benutzerdefinierten JavaScript-Implementierungen durch CSS ersetzen, um denselben Effekt zu erzielen.

Anwendungsfälle

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

Code (Mobilgeräte)

Im vorherigen Beispiel hat Tokopedia die Timeline für anonymen Scrollfortschritt verwendet. Im folgenden Code verwendet redBus die Zeitleiste für den Fortschritt der benannten Ansicht. Die Animation ändert die opacity und clip-path des <img>-Elements innerhalb des definierten animation-range im nächstgelegenen übergeordneten Scroller des Elements, in diesem Fall dem 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 darstellt und unsere Page Experience-Signale für SEO verbessert. Außerdem ist die Lernkurve sehr flach, was das Tool zu einem Muss für jede E-Commerce-Website macht. Wir haben auch positives Feedback und Unterstützung von anderen Teams erhalten, um SDA für weitere Nutzeraktionen zu nutzen.“— Amit Kumar, Senior Engineering Manager, redBus.

Policybazaar

Der Vergleich von Versicherungsplänen ist eine wiederholte wichtige Aktion, die Nutzer durchführen, um ihre Entscheidungsfindung zu unterstützen. Mit scrollgesteuerten Animationen hat Policybazaar die Größe von Elementen mit niedriger Priorität verringert, wenn der Nutzer die Tabelle gescrollt hat. Das Ergebnis ist ein flüssiges Scrollen und eine bessere Lesbarkeit.

Mit scrollgesteuerten Animationen konnten wir den Viewport-Bereich maximieren, damit Nutzer Tarife vergleichen können. So haben wir für eine fokussierte und übersichtliche Darstellung gesorgt.—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 Zeitachse für den Scrollfortschritt festzulegen, mit der der Fortschritt der CSS-Animation gesteuert wird. 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;
  }
}

Scrollgesteuerte Animationen als gängiges Muster im gesamten Kaufprozess

Alle vorgestellten E-Commerce-Unternehmen haben auf Seiten mit Karten scrollgesteuerte Animationen verwendet, um die Aufmerksamkeit der Nutzer auf die Karten zu lenken . Die folgenden Beispiele zeigen Scrolleffekte auf Karten in verschiedenen Phasen des Nutzerprozesses. Dies wird in der Regel mit einer Fortschrittszeitachse für anonyme Aufrufe erreicht, 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 Produkteintrag)

Tokopedia (Seite mit Produktdetails)

Überlegungen bei der Verwendung der Scroll-driven Animations API

Scrollgesteuerte Animationen können für Browser, die sie nicht unterstützen, mit einem Polyfill nachgerüstet werden, z. B. mit dem Scroll-Timeline-Polyfill. Wenn Sie das tun, sind zusätzliche Tests erforderlich, um sicherzustellen, dass es gut mit Ihrem Framework funktioniert und dass Browser, die das Polyfill verwenden, keine Animationsfehler oder Ruckeln aufweisen.

In CSS können Sie mit @supports prüfen, ob die Animation-Timeline unterstützt wird, bevor Sie scrollgesteuerte Animationen verwenden. Beispiel:

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

}

Ressourcen

• Scroll-driven animations demos
• Elemente beim Scrollen animieren
• Codelab: Erste Schritte mit scrollgesteuerten 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 View Transitions, Popover, Container Queries und dem Selektor has() profitiert haben.

• Warum sind Web-UI-Funktionen für Ihre E-Commerce-Website wichtig?
• Fallstudien zu Übergängen ansehen
• Fallstudien zur Popover API
• Fallstudien zu Container Queries
• Anwendungsbeispiele für den Selektor:has()