Case study sulle animazioni con scorrimento

Le animazioni con scorrimento sono un modello UX comune sul web. Un'animazione con scorrimento è collegata alla posizione di scorrimento di un contenitore a scorrimento. Ciò significa che, quando scorri verso l'alto o verso il basso, l'animazione collegata scorre in avanti o indietro in risposta diretta. Alcuni esempi sono effetti come immagini di sfondo con parallasse o indicatori di lettura che si muovono mentre scorri il dito.

Gli sviluppatori hanno solitamente creato animazioni con scorrimento tramite JavaScript per rispondere agli eventi di scorrimento sul thread principale. Ciò rende difficile creare animazioni con scorrimento ad alte prestazioni che siano sincronizzate con lo scorrimento, a causa degli eventi di scorrimento inviati in modo asincrono, e spesso portano a jank perché si trovano nel thread principale.

Tuttavia, nell'ambito delle nuove funzionalità CSS e UI disponibili nei browser, ora puoi creare animazioni dichiarative basate sullo scorrimento. Con le sequenze temporali dello scorrimento e le sequenze temporali, nuovi concetti che si integrano con l'API Web Animations (WAAPI) e l'API CSS Animations esistenti, ora puoi avere animazioni fluide e fluide che vengono eseguite a scorrimento fuori dal thread principale, con solo 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 con scorrimento per ottimizzare le prestazioni delle pagine e per migliorare l'esperienza di navigazione complessiva nella canalizzazione di conversione e-commerce.

Siamo riusciti a ridurre fino all'80% delle nostre righe di codice rispetto all'uso degli eventi di scorrimento JavaScript convenzionali e abbiamo osservato che l'utilizzo medio della CPU si è ridotto 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 di avanzamento dello scorrimento anonima per controllare l'avanzamento dell'animazione CSS. La visibilità della barra persistente superiore cambia in base alla posizione di scorrimento all'interno dell'elemento 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 offre animazioni diverse per dispositivi mobili e computer desktop nella pagina di destinazione delle cose da fare, che viene mostrata a tutti gli utenti all'inizio della canalizzazione di conversione. Grazie alle animazioni con scorrimento, l'azienda è riuscita a sostituire queste implementazioni JavaScript personalizzate con CSS per ottenere lo stesso effetto.

Casi d'uso

Galleria fotografica con Visualizzazione di immagini (per dispositivi mobili) e Flusso di copertina (per computer).

Codice (dispositivo mobile)

Nell'esempio precedente, Tokopedia ha utilizzato la sequenza temporale di avanzamento dello scorrimento anonima. Nel codice seguente, redBus utilizza la sequenza temporale di avanzamento della visualizzazione con nome. L'animazione modifica opacity e clip-path dell'elemento <img> all'interno del valore animation-range definito all'interno dello scroller predecessore più vicino dell'elemento, 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 questa funzionalità, in quanto è una combinazione perfetta di rendimento con un'esperienza migliore, e questo migliora i segnali relativi all'esperienza sulle pagine per la SEO. Inoltre, la curva di apprendimento minima lo rende un must per ogni sito web di e-commerce. Inoltre, abbiamo ricevuto feedback positivi e supporto da altri team per sfruttare SDA per aumentare il numero di percorsi degli utenti. Amit Kumar, Senior Engineering Manager, redBus.

Bazar delle norme

Il confronto dei piani assicurativi è un'azione chiave ripetuta dagli utenti per guidare il loro processo decisionale. Utilizzando animazioni a scorrimento, Policybazaar ha ridotto le dimensioni degli elementi a bassa priorità in risposta allo scorrimento della tabella da parte dell'utente. Ciò ha consentito un'esperienza di scorrimento fluida e, contemporaneamente, una migliore leggibilità.

Grazie alle animazioni con scorrimento, siamo riusciti a massimizzare lo spazio dell'area visibile da parte dell'utente per confrontare i piani, assicurando un'esperienza di lettura mirata e ordinata. - 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 di avanzamento dello scorrimento anonima per controllare l'avanzamento dell'animazione CSS. In questo caso, le dimensioni del carattere vengono ridotte e l'intestazione viene dissolvenza 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 con scorrimento come modello comune nel percorso dell'utente

Tutte le aziende di e-commerce in primo piano hanno utilizzato animazioni con scorrimento nelle pagine con schede, animandole per attirare l'attenzione dell'utente . I seguenti esempi mostrano gli effetti di scorrimento sulle schede in diversi punti del percorso dell'utente. A questo scopo, utilizza una sequenza temporale di avanzamento della visualizzazione anonima 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 con scorrimento per i browser non supportati, ad esempio con il polyfill della sequenza temporale di scorrimento. In tal caso, saranno necessari ulteriori test per verificare che funzioni correttamente con il framework e che i browser che utilizzano il polyfill non riscontrino errori di animazione o esperienze di scarsa qualità.

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

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

}

Risorse

• Demo di animazioni con scorrimento
• Animare gli elementi quando si scorre con le animazioni con scorrimento
• Codelab: iniziare a utilizzare le animazioni con scorrimento in CSS
• Estensione di Chrome: debugger di animazioni con 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 spiegano in che modo le aziende di e-commerce hanno beneficiato dell'utilizzo di nuove funzionalità CSS e UI, come Visualizza transizioni, Popover, Query container 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 di query su container
• Case study del selettore:has()