Un case study sul rendimento delle animazioni con scorrimento

Yuriko Hirota

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 vivo l'interesse degli 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 sul thread principale. Ciò 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 performanti e sincronizzate con lo scorrimento è impossibile o molto difficile.

Stiamo introducendo un nuovo insieme 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 per le animazioni basate sullo scorrimento è attualmente supportata nei seguenti browser:

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

API CSS per animazioni basate sullo scorrimento e 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, svolgendo quindi tutto il lavoro pesante.

Ora arriva la parte interessante: supponiamo di aver implementato un calcolo molto complesso 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 avrai intuito, la versione JavaScript classica diventa instabile e lenta a causa della giunzione delle risorse del thread principale. D'altra parte, la versione CSS non è assolutamente influenzata dal lavoro pesante di JavaScript e può rispondere alle interazioni di scorrimento dell'utente.

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

La demo seguente mostra un'applicazione dell'animazione basata sullo scorrimento creata da CyberAgent. Puoi notare che la foto appare gradualmente mentre scorri.

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

Il vantaggio della nuova API non è limitato solo ai 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 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 insieme all'API Web Animations (WAAPI) e all'API CSS Animations esistenti per consentire animazioni dichiarative basate sullo scorrimento.

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 di CSS e JavaScript.

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