Case study sulle animazioni con scorrimento

Swetha Gopalakrishnan

Saurabh Rajpal

Le animazioni basate sullo scorrimento sono un modello UX comune sul web. Un'animazione basata sullo scorrimento è 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 viene riprodotta in avanti o indietro in risposta diretta. Esempi sono effetti come le immagini di sfondo parallasse o gli indicatori di lettura che si muovono durante lo scorrimento.

In genere, gli sviluppatori creano animazioni basate sullo scorrimento utilizzando JavaScript per rispondere agli eventi di scorrimento nel thread principale. Ciò rende difficile la creazione di animazioni basate sullo scorrimento performanti e sincronizzate con lo scorrimento, poiché gli eventi di scorrimento vengono inviati in modo asincrono e spesso causano jank perché si trovano nel thread principale.

Tuttavia, nell'ambito delle nuove funzionalità CSS e UI in arrivo nei browser, ora puoi creare animazioni dichiarative basate sullo scorrimento. Con le sequenze temporali di scorrimento e le sequenze temporali di visualizzazione, nuovi concetti che si integrano con l'API Web Animations (WAAPI) e l'API CSS Animations esistenti, ora puoi avere animazioni fluide e scorrevoli basate sullo scorrimento eseguite al di fuori del thread principale, con poche righe di codice. In questo case study, scopri come Tokopedia, redBus e Policybazaar stanno già traendo vantaggio da questa nuova funzionalità.

Tokopedia

Tokopedia ha sostituito le precedenti implementazioni JavaScript personalizzate con animazioni basate sullo scorrimento per ottimizzare il rendimento delle pagine e migliorare l'esperienza di navigazione complessiva nel funnel di conversione dell'e-commerce.

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

Codice

La seguente implementazione utilizza la funzione scroll() per impostare una sequenza temporale anonima di avanzamento dello scorrimento per controllare l'avanzamento dell'animazione CSS. La visibilità della barra statica superiore cambia in base alla posizione di scorrimento all'interno di animationRange definito.

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 computer sulla pagina di destinazione Cose da fare, che viene mostrata all'inizio della canalizzazione di conversione a tutti gli utenti. Con le animazioni basate sullo scorrimento, sono riusciti a sostituire queste implementazioni JavaScript personalizzate con CSS per ottenere lo stesso effetto.

Casi d'uso

Galleria fotografica con rivelazione dell'immagine (per dispositivi mobili) e Cover Flow (per computer).

Codice (dispositivi mobili)

Nell'esempio precedente, Tokopedia ha utilizzato la cronologia anonima dell'avanzamento dello scorrimento. Nel seguente codice, redBus utilizza la cronologia della visualizzazione denominata. L'animazione modifica opacity e clip-path dell'elemento <img> all'interno di animation-range definito nello scorrimento dell'elemento ancestrale più vicino, 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 questa funzionalità perché è un mix perfetto di rendimento e migliore esperienza, che rafforza i nostri indicatori dell'esperienza di pagina per la SEO. Inoltre, la curva di apprendimento minima lo rende un must per ogni sito web di e-commerce. Abbiamo anche ricevuto feedback positivi e supporto da altri team per sfruttare SDA per altri percorsi utente.— Amit Kumar, Senior Engineering Manager, redBus.

Policybazaar

Il confronto dei piani assicurativi è un'azione chiave ripetuta intrapresa dagli utenti per guidare il loro processo decisionale. Utilizzando le animazioni basate sullo scorrimento, Policybazaar ha ridotto le dimensioni degli elementi a bassa priorità in risposta allo scorrimento della tabella da parte dell'utente. Ciò ha portato a un'esperienza di scorrimento fluida, migliorando al contempo la leggibilità.

Con le animazioni basate sullo scorrimento, siamo riusciti a massimizzare lo spazio della finestra per consentire all'utente di confrontare i piani, garantendo un'esperienza di lettura mirata e senza ingombri." - Rishabh Mehrotra, Head of Design for Life Insurance BU, PolicyBazaar.

Codice

Analogamente all'esempio precedente di Tokopedia, Policybazaar utilizza la funzione scroll() per impostare una sequenza temporale anonima di avanzamento dello scorrimento per controllare l'avanzamento dell'animazione CSS. In questo caso, riduci le dimensioni del carattere e sfuma l'intestazione in base alla posizione di scorrimento all'interno dell'elemento animation-range definito.

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

Animazioni basate sullo scorrimento come pattern comune nel percorso dell'utente

Tutte le società di e-commerce in evidenza hanno utilizzato animazioni basate sullo scorrimento nelle pagine con schede, animando le schede per attirare l'attenzione dell'utente . Gli esempi seguenti mostrano gli effetti di scorrimento sulle schede in diverse parti del percorso dell'utente. In genere, questo risultato si ottiene utilizzando una sequenza temporale anonima dell'avanzamento della visualizzazione per controllare l'avanzamento dell'animazione CSS personalizzata, come mostrato nel 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 della scheda di prodotto)

Tokopedia (pagina dei dettagli del prodotto)

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

È possibile eseguire il polyfill delle animazioni basate sullo scorrimento per i browser non supportati, ad esempio con il polyfill Scroll-timeline. In questo caso, saranno necessari test aggiuntivi per assicurarsi che funzioni bene con il tuo framework e che i browser che utilizzano il polyfill non riscontrino errori di animazione o esperienze instabili.

Da CSS puoi utilizzare @supports per verificare il supporto di animation-timeline prima di utilizzare le animazioni basate sullo scorrimento. Ad esempio:

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

}

Risorse

• Demo delle animazioni basate sullo scorrimento
• Animare gli elementi durante lo scorrimento con le animazioni basate sullo scorrimento
• Codelab: Guida introduttiva alle animazioni basate sullo scorrimento in CSS
• Estensione di Chrome: debugger di animazioni basate sullo scorrimento
• Polyfill per la cronologia 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 tratto vantaggio dall'utilizzo di nuove funzionalità CSS e UI come View Transitions, Popover, Container Queries e il selettore has().

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