Case study sulle animazioni con scorrimento

Swetha Gopalakrishnan

Saurabh Rajpal

Le animazioni basate sullo scorrimento sono un pattern UX comune sul web. Un'animazione tramite 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 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.

In genere, gli sviluppatori hanno creato 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 ad alte prestazioni sincronizzate con lo scorrimento, a causa dell'invio asincrono degli eventi di scorrimento, e spesso causa jank dovuti alla presenza sul 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 case study, scopri come Tokopedia, redBus e Policybazaar stanno già traendo vantaggio da 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 nostre righe di codice rispetto all'utilizzo 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 cronologia di avanzamento dello scorrimento anonima 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 dagli utenti per guidare 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, siamo stati in grado di massimizzare lo spazio dell'area visibile in modo che l'utente possa confrontare i piani, garantendo un'esperienza di lettura mirata e ordinata. - Rishabh Mehrotra, Head of Design for Life Insurance BU, 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 la dissolvenza dell'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 aziende di e-commerce in primo piano hanno utilizzato animazioni basate sullo scorrimento nelle pagine con schede, che animano 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 considerare quando si utilizza l'API Scorrimento-Driven Animations

È 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 insieme al 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 della sequenza temporale dell'animazione prima di utilizzare animazioni con 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 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?
• Visualizza i case study sulle transizioni
• Case study sull'API Popup
• Case study su Container Queries
• Case study sul selettore:has()