Case study sulle animazioni con scorrimento

Swetha Gopalakrishnan

Saurabh Rajpal

Le animazioni basate sullo scorrimento sono un pattern UX comune sul web. Un'animazione basata sullo scorrimento è collegata alla posizione di scorrimento di un contenitore scorrevole. Ciò significa che, mentre scorri verso l'alto o verso il basso, l'animazione collegata scorre in avanti o indietro in risposta diretta. Alcuni esempi sono gli effetti come le immagini di sfondo con parallasse o gli indicatori di lettura che si spostano durante lo scorrimento.

In genere, gli sviluppatori hanno creato animazioni basate sullo scorrimento utilizzando JavaScript per rispondere agli eventi di scorrimento nel thread principale. Questo rende difficile creare animazioni basate sullo scorrimento efficaci e sincronizzate con lo scorrimento, poiché gli eventi di scorrimento vengono inviati in modo asincrono e spesso causano scatti a causa della presenza 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 animazioni basate su scorrimento e le animazioni basate su visualizzazione, nuovi concetti che si integrano con le API Web Animations (WAAPI) e CSS Animations esistenti, ora puoi avere animazioni basate su scorrimento fluide in esecuzione nel thread principale, con solo poche righe di codice. In questo caso studio, scopri in che modo Tokopedia, redBus e Policybazaar stanno già beneficiando di questa nuova funzionalità.

Tokopedia

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

Siamo riusciti a ridurre fino all'80% delle righe di codice rispetto all'utilizzo degli 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 del progresso dello scorrimento per controllare l'avanzamento dell'animazione CSS. La visibilità della barra in primo piano superiore cambia in base alla posizione di scorrimento all'interno del 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 nella pagina di destinazione relativa alle cose da fare, che viene mostrata all'inizio della canalizzazione di conversione a tutti gli utenti. Con le animazioni basate sullo scorrimento, è stato possibile sostituire queste implementazioni JavaScript personalizzate con CSS per ottenere lo stesso effetto.

Casi d'uso

Galleria fotografica con Rivelazione immagine (per dispositivi mobili) e Cover Flow (per computer).

Codice (dispositivo mobile)

Nell'esempio precedente, Tokopedia ha utilizzato la sequenza temporale anonima del progresso dello scorrimento. Nel codice seguente, redBus utilizza la sequenza temporale del progresso della visualizzazione con nome. L'animazione modifica opacity e clip-path dell'elemento <img> all'interno del animation-range definito all'interno dello scroller dell'antenato più vicino dell'elemento, in questo caso lo scroller della galleria di foto.

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, che migliora i nostri indicatori 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. Abbiamo anche ricevuto feedback positivi e assistenza da altri team per sfruttare la SDA per più percorsi utente. - Amit Kumar, Senior Engineering Manager, redBus.

Policybazaar

Il confronto dei piani assicurativi è un'azione chiave ripetuta intrapresa dagli utenti per orientare il loro processo decisionale. Utilizzando animazioni basate sullo scorrimento, Policybazaar ha ridotto le dimensioni degli elementi di bassa priorità in risposta allo scorrimento della tabella da parte dell'utente. Il risultato è stato un'esperienza di scorrimento fluida e una maggiore leggibilità.

Con le animazioni basate sullo scorrimento, abbiamo potuto massimizzare lo spazio della visualizzazione per consentire all'utente di confrontare i piani, garantendo un'esperienza di lettura mirata e senza elementi di disturbo. - Rishabh Mehrotra, responsabile del design per la BU di assicurazione sulla vita, PolicyBazaar.

Codice

Come nell'esempio precedente di Tokopedia, Policybazaar utilizza la funzione scroll() per impostare una sequenza temporale anonima dell'avanzamento dello scorrimento per controllare l'avanzamento dell'animazione CSS. In questo caso, riduci la dimensione del carattere e attenua l'intestazione in base alla posizione di scorrimento all'interno del 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 aziende di e-commerce in primo piano hanno utilizzato animazioni basate sullo scorrimento nelle pagine con schede, animando le schede per attirare l'attenzione dell'utente . I seguenti esempi mostrano gli effetti di scorrimento sulle schede in diverse parti del percorso dell'utente. In genere, questo viene ottenuto utilizzando una sequenza temporale dell'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 tenere presenti quando si utilizza l'API Animations con scorrimento

È possibile eseguire il polyfill delle animazioni basate sullo scorrimento per i browser non supportati, ad esempio con il polyfill della cronologia dello scorrimento. In questo caso, sarà necessario eseguire ulteriori test per assicurarsi che funzionino bene con il tuo framework e che i browser che utilizzano il polyfill non presentino errori di animazione o esperienze discontinue.

In 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 di animazioni basate sullo scorrimento
• Animare gli elementi durante lo scorrimento con le animazioni basate sullo scorrimento
• Codelab: Iniziare a utilizzare le animazioni basate sullo scorrimento in CSS
• Estensione di Chrome: debugger di animazione basato sullo scorrimento
• Scroll-timeline Polyfill
• Vuoi segnalare un bug o una nuova funzionalità? Vogliamo conoscere la tua opinione.

Consulta gli altri articoli di questa serie per scoprire in che modo le aziende di e-commerce hanno tratto vantaggio dall'utilizzo di nuove funzionalità CSS e UI come le transizioni di visualizzazione, i popup, le query del contenitore e il selettore has().

• Perché le funzionalità dell'interfaccia utente web sono importanti per il tuo sito di e-commerce?
• Visualizzare i case study di Transitions
• Case study sull'API Popup
• Case study su Container Queries
• Case study sul selettore:has()