Case study sulle animazioni con scorrimento

Swetha Gopalakrishnan

Saurabh Rajpal

Animazioni basate sullo scorrimento sono uno schema UX comune sul web. Un modello di progettazione l'animazione è collegata alla posizione di scorrimento di un contenitore di scorrimento. Ciò significa che, mentre scorri verso l'alto o verso il basso, l'animazione collegata esegue lo scrubbing avanti o indietro. in risposta diretta. Alcuni esempi sono effetti come lo sfondo con parallasse o indicatori di lettura che si muovono mentre scorri.

Gli sviluppatori hanno in genere creato animazioni basate sullo scorrimento utilizzando JavaScript per rispondere agli eventi di scorrimento sul thread principale. Per questo è difficile creare ad alte prestazioni guidate dallo scorrimento e sincronizzate con lo scorrimento, per via eventi di scorrimento pubblicati in modo asincrono e spesso comportano blocchi dovuti a essere nel thread principale.

Tuttavia, nell'ambito del nuovo Funzionalità CSS e UI disponibili nei browser, ora puoi creare animazioni dichiarative guidate dallo scorrimento. Con cronologia di scorrimento e visualizzazione Sequenze temporali, nuovi concetti che si integrano con API Web Animations (WAAPI) e API CSS Animations, puoi ottenere una superficie liscia come la seta animazioni guidate dallo scorrimento che escono dal thread principale, con solo poche righe di le API nel tuo codice. In questo case study, scopri come Tokopedia, redBus e Policybazaar usufruiscono già di questa nuova funzionalità.

Tokopedia

Tokopedia ha sostituito le precedenti implementazioni JavaScript personalizzate con Animazioni basate sullo scorrimento per ottimizzare le prestazioni delle pagine e per migliorare esperienza di navigazione complessiva nella canalizzazione di conversione e-commerce.

Siamo riusciti a ridurre fino all'80% delle righe di codice rispetto all'uso eventi di scorrimento JavaScript convenzionali e ha osservato che l'utilizzo medio della CPU ridotta dal 50% al 2% durante lo scorrimento... Andy Wihalim Senior Software Engineer, Tokopedia

Codice

La seguente implementazione utilizza la funzione scroll() per impostare uno scorrimento anonimo sequenza temporale di avanzamento per controllare l'avanzamento dell'animazione CSS. La la visibilità della barra persistente superiore cambia in base alla posizione di scorrimento all'interno della definito 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 ha animazioni diverse per dispositivi mobili e desktop pagina di destinazione things-to-do, che viene mostrata all'inizio della canalizzazione di conversione a tutti gli utenti. Con le animazioni basate sullo scorrimento, sono stati in grado di sostituire queste implementazioni JavaScript personalizzate con CSS lo stesso effetto.

Casi d'uso

Galleria fotografica con Image Reveal (per dispositivi mobili) e Cover Flow (per computer).

Codice (dispositivi mobili)

Nell'esempio precedente, Tokopedia ha utilizzato l'avanzamento di scorrimento anonimo tempistiche. Nel codice seguente, redBus utilizza l'avanzamento della vista con nome tempistiche. L'animazione modifica opacity e clip-path di <img> elemento all'interno del valore animation-range definito all'interno dell'elemento più vicino scorrimento precedente, che in questo caso è lo scorrimento della galleria fotografica.

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%;
   }
`;

Siamo molto felici di vedere che questa funzionalità offre un insieme perfetto di prestazioni con una migliore esperienza, aumentando i nostri indicatori relativi all'esperienza sulle pagine per la SEO. Oltre a che la curva di apprendimento minima lo rende un must per ogni e-commerce sito web. Abbiamo anche ricevuto feedback e assistenza positivi da altri team per sfruttare SDA per ulteriori percorsi degli utenti. Amit Kumar, Senior Engineering Gestore, redBus.

Bazar criteri

Il confronto tra i piani assicurativi è un'azione chiave ripetuta dagli utenti per orientare il loro processo decisionale. Utilizzando animazioni basate sullo scorrimento, Policybazaar ha ridotto dimensioni degli elementi a bassa priorità in risposta allo scorrimento della tabella da parte dell'utente. Questo ha determinato un'esperienza di scorrimento elegante e al contempo migliora la leggibilità.

Con le animazioni basate sullo scorrimento, siamo riusciti a massimizzare lo spazio dell'area visibile per gli all'utente di confrontare i piani, assicurando una lettura mirata e senza disordine un'esperienza senza precedenti.-Rishabh Mehrotra, Responsabile di Design for Life Insurance BU, PolicyBazaar.

Codice

Analogamente all'esempio precedente di Tokopedia, Policybazaar utilizza la classe scroll() per impostare una cronologia di avanzamento dello scorrimento anonima per che controlla l'avanzamento dell'animazione CSS. In questo caso, la riduzione del carattere le dimensioni e la dissolvenza dell'intestazione in base alla posizione di scorrimento all'interno dell'area animation-range.

@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;
  }
}

Le animazioni basate sullo scorrimento rappresentano uno schema comune durante il percorso dell'utente.

Tutte le aziende di e-commerce in primo piano hanno utilizzato animazioni basate sullo scorrimento sulle pagine con schede, che si animano per attirare l'attenzione dell'utente . La i seguenti esempi mostrano gli effetti di scorrimento sulle schede in diverse parti dell'utente viaggio. A tal fine, in genere si utilizza una cronologia di avanzamento della visualizzazione anonima per controllare l'avanzamento dell'animazione CSS personalizzata, come mostrato nell' seguente snippet CSS.

@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 (home page)

Policybazaar (pagina Scheda di prodotto)

Tokopedia (pagina dei dettagli del prodotto)

Aspetti da considerare quando si utilizza l'API Scorrimento-driven Animations

È possibile eseguire il polyfill di animazioni basate sullo scorrimento per browser non supportati, ad esempio con polyfill della sequenza temporale di scorrimento. Se lo fai, richiedono ulteriori test per verificare che funzionino correttamente e i browser che usano il polyfill non presentano animazioni errori o esperienze scadenti.

In CSS puoi utilizzare @supports per testare il supporto della sequenza temporale dell'animazione prima di utilizzare animazioni basate sullo scorrimento. Ad esempio:

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

}

Risorse

• Demo di animazioni basate su scorrimento
• Applicare animazioni agli elementi con scorrimento grazie a animazioni di scorrimento
• Codelab: iniziare a utilizzare le animazioni basate sullo scorrimento in CSS
• Estensione di Chrome: debugger di animazioni tramite scorrimento
• Polyfill della sequenza temporale di scorrimento
• Vuoi segnalare un bug o una nuova funzionalità? Vogliamo conoscere la tua opinione.

Esplora gli altri articoli di questa serie che parlano di come le aziende di e-commerce hanno usufruito dei vantaggi derivanti dall'utilizzo di nuove funzionalità CSS e UI come le transizioni di visualizzazione, Popover, query contenitore e il selettore has().

• Perché le funzionalità dell'interfaccia utente web sono importanti per il tuo sito di e-commerce?
• Visualizza i case study sulle transizioni
• Case study sull'API Popover
• Case study sulle query container
• Case study sul selettore :has()