Un case study sul rendimento delle animazioni con scorrimento

Yuriko Hirota

Quali sono le novità delle 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. Questo può essere un ottimo modo per mantenere gli utenti coinvolti 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 sul thread principale. Questo ha causato due problemi principali:

• Lo scorrimento viene eseguito su un thread separato e pertanto genera eventi di scorrimento in modo asincrono.
• Le animazioni del thread principale sono soggette a jank.

In questo modo, la creazione di animazioni basate sullo scorrimento con prestazioni elevate e sincronizzate con lo scorrimento è impossibile o molto difficile.

Stiamo ora introducendo un nuovo set di API per supportare le animazioni basate sullo scorrimento, che puoi utilizzare da CSS o JavaScript. L'API tenta 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 delle animazioni basate sullo scorrimento è attualmente supportata nei seguenti browser:

Questo articolo confronta il nuovo approccio con la tecnica JavaScript classica per mostrare quanto possono essere facili e fluide le animazioni basate sullo scorrimento con la nuova API.

API CSS delle animazioni basate sullo scorrimento rispetto a JavaScript classico

La seguente barra di avanzamento di esempio è creata utilizzando tecniche JavaScript di classe.

Il documento risponde ogni volta che si verifica l'evento scroll per calcolare la percentuale di scrollHeight 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, eseguendo quindi tutto il lavoro pesante.

Ora passiamo alla parte interessante: supponiamo di aver implementato un calcolo molto pesante su entrambe le versioni del sito web che consumerebbe 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 JavaScript classica diventa instabile e lenta a causa dell'intersezione delle risorse del thread principale. D'altra parte, la versione CSS non è interessata dal lavoro JavaScript pesante e può rispondere alle interazioni di scorrimento dell'utente.

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

La seguente demo mostra un'applicazione di animazione basata sullo scorrimento creata da CyberAgent. Puoi notare che la foto viene visualizzata gradualmente man mano che scorri.

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

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

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 sottostante è la stessa della versione CSS. L'API tenta di utilizzare il minor numero possibile di risorse del thread principale, rendendo le animazioni molto più fluide rispetto all'approccio JavaScript classico.

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

Altre demo e risorse

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

Se ti interessa saperne di più sulle nuove animazioni basate sullo scorrimento, consulta questo articolo e il talk di I/O 2023.