Un case study sul rendimento delle animazioni con scorrimento

Yuriko Hirota
Yuriko Hirota

Quali sono le novità relative alle animazioni basate sullo scorrimento?

Le animazioni basate sullo scorrimento sono un modo per aggiungere interattività e interesse visivo al tuo sito web o alla tua applicazione web, attivate dalla posizione di scorrimento dell'utente. Può essere un ottimo modo per coinvolgere gli utenti e rendere il tuo sito web più accattivante dal punto di vista visivo.

In passato, l'unico modo per creare animazioni basate sullo scorrimento era rispondere all'evento di scorrimento nel thread principale. Ciò ha causato due problemi principali:

  • Lo scorrimento viene eseguito in un thread separato e, di conseguenza, genera eventi di scorrimento in modo asincrono.
  • Le animazioni del thread principale sono soggette a scatti.

Ciò rende impossibile o molto difficile creare animazioni basate sullo scorrimento efficaci e sincronizzate con lo scorrimento.

Stiamo introducendo un nuovo insieme di API per supportare le animazioni basate sullo scorrimento, che puoi utilizzare da CSS o JavaScript. L'API cerca di utilizzare il minor numero possibile di risorse del thread principale, rendendo le animazioni basate sullo scorrimento molto più facili da implementare e anche molto più fluide. L'API di animazione basata sullo scorrimento è attualmente supportata nei seguenti browser:

Supporto dei browser

  • Chrome: 115.
  • Edge: 115.
  • Firefox: dietro un flag.
  • Safari: non supportato.

Origine

Questo articolo mette a confronto il nuovo approccio con la tecnica JavaScript classica per mostrare quanto possano essere semplici e fluide le animazioni basate sullo scorrimento con la nuova API.

API CSS per le animazioni basate sullo scorrimento rispetto a JavaScript classico

La barra di avanzamento di esempio riportata di seguito è stata creata utilizzando tecniche JavaScript di classi.

Il documento risponde ogni volta che si verifica l'evento scroll per calcolare la percentuale di scrollHeight fino a cui l'utente ha eseguito lo scorrimento.

document.addEventListener("scroll", () => {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100; 
  document.getElementById("progress").style.width = scrolled + "%";
})

La seguente demo mostra la stessa barra di avanzamento utilizzando la nuova API con CSS.

@keyframes grow-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

#progress {
  animation: grow-progress auto linear forwards;
  animation-timeline: scroll(block root);
}

La nuova funzionalità CSS animation-timeline converte automaticamente una posizione in un intervallo di scorrimento in una percentuale di avanzamento, quindi esegue tutto il lavoro più complesso.

Ora viene la parte interessante: supponiamo che tu abbia implementato un calcolo molto pesante su entrambe le versioni del sito web che consuma la maggior parte delle risorse del thread principale. 

function someHeavyJS(){
  let time = 0;
  window.setInterval(function () {
    time++;
    for (var i = 0; i < 1e9; i++) {
      result = i;
    }
    console.log(time)
  }, 100);
}

Come previsto, la versione classica di JavaScript diventa discontinua e lenta a causa dell'unione delle risorse del thread principale. D'altra parte, la versione CSS non è interessata dal pesante lavoro di JavaScript e può rispondere alle interazioni di scorrimento dell'utente.

L'utilizzo della CPU è completamente diverso in DevTools, come mostrato negli screenshot seguenti.

Confronto del thread principale.

La seguente demo mostra un'applicazione di animazione basata sullo scorrimento creata da CyberAgent. Puoi vedere che la foto si attenua mentre scorri.

Nuova API JavaScript per le animazioni basate sullo scorrimento rispetto a JavaScript classico

Il vantaggio della nuova API non è limitato solo al CSS. Puoi anche creare animazioni fluide basate sullo scorrimento utilizzando JavaScript. Dai un'occhiata al seguente esempio:

const progressbar = document.querySelector('#progress');
progressbar.style.transformOrigin = '0% 50%';
progressbar.animate(
  {
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    fill: 'forwards',
    timeline: new ScrollTimeline({
      source: document.documentElement,
    }),
  }
);

In questo modo puoi creare la stessa animazione della barra di avanzamento mostrata nella demo CSS precedente utilizzando solo JavaScript. La tecnologia di base è la stessa della versione CSS. L'API cerca di utilizzare il minor numero possibile di risorse del thread principale, rendendo le animazioni molto più fluide rispetto all'approccio classico di JavaScript.

Inoltre, questa nuova API funziona in combinazione con le API Web Animations (WAAPI) ed CSS Animations esistenti per attivare animazioni dichiarative basate sullo scorrimento.

Altre demo e risorse

Puoi controllare le diverse implementazioni dell'animazione basata sullo scorrimento tramite questo sito demo, dove puoi confrontare le demo che utilizzano queste nuove API da CSS e JavaScript.

Per scoprire di più sulle nuove animazioni basate sullo scorrimento, consulta questo articolo e la presentazione di I/O 2023.