Diese Seite wurde von der Cloud Translation API übersetzt.

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 beim Scrollen nach oben oder unten die verknüpfte Animation in Direct Response vor- oder zurückspult. Beispiele dafür sind Effekte wie Parallaxe-Hintergrundbilder oder Leseanzeigen, die sich beim Scrollen bewegen.

Bisher haben Entwickler in der Regel scrollgesteuerte 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 verfügbar werden, können Sie jetzt deklarative, scrollbare 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.

Unterstützte Browser

Quelle

Tokopedia

Tokopedia ersetzte seine früheren benutzerdefinierten JavaScript-Implementierungen durch scrollbare Animationen, um die Seitenleistung zu optimieren und das Surferlebnis 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

Animierte Änderung der Sichtbarkeit der oberen fixierten Leiste basierend auf der Scrollposition des Nutzers.

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 bietet auf der Ding-to-do-Landingpage, die allen Nutzern zu Beginn des Conversion-Trichters angezeigt wird, verschiedene Animationen für Mobilgeräte und Computer. 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).

Bilder-Entfaltungseffekt mit Scrollanimation zum Laden von Bildern in der Fotogalerie „Mögliche Aktivitäten“ von redBus.

Code (Mobilgerät)

Im vorherigen Beispiel hat Tokopedia die Zeitachse für den anonymen Scrollfortschritt 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 Mischung aus Leistung und Nutzerfreundlichkeit bietet und so unsere Signale für die Nutzerfreundlichkeit von Seiten für die Suchmaschinenoptimierung verstärkt. Außerdem ist die Lernkurve so gering, dass es für jede E-Commerce-Website ein Muss ist. Wir haben auch positives Feedback und Unterstützung von anderen Teams erhalten, um die SDA für mehr User Journeys zu nutzen – 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 scrollbasierten 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.

Durch Scrollen gesteuerte Animation animate-timeline auf einer Vergleichstabelle in der Geschäftsbereiche „Investitionen und Leben“.

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 der Header 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 Journey-Prozesses. 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)

Scroll-driven animation fly-in effect for loading product cards on redBus "Things To Do" landing page.

Policybazaar (Seite mit Produkteinträgen)

Scroll-basiertes Ein- und Ausblenden von Produktkarten in den Geschäftsbereichen „Investment“ und „Life“.

Tokopedia (Produktdetailseite)

Ein- und Ausblendungsanimation beim Scrollen durch die aufgeführten Produkte.

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

Für nicht unterstützte Browser können scrollbare Animationen mit Polyfills erstellt werden, z. B. mit dem Scroll-Zeitachsen-Polyfill. In diesem Fall sind zusätzliche Tests erforderlich, um sicherzustellen, dass die Funktion zusammen mit Ihrem Framework funktioniert und in Browsern, die das Polyfill verwenden, keine Animationsfehler oder Störungen auftreten.

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 Animationen animieren
Codelab: Erste Schritte mit scrollbasierten Animationen in CSS
Chrome-Erweiterung: Scroll-driven animation debugger
Polyfill mit Scroll-Zeitachse
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.