Un case study sul rendimento delle animazioni con scorrimento

Yuriko Hirota
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, attivati dalla posizione di scorrimento dell'utente. Questo può essere un ottimo modo per mantenere coinvolti gli utenti e rendere il tuo sito visivamente più accattivante.

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 performanti e sincronizzate con lo scorrimento.

Stiamo ora introducendo un nuovo set 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 Animations driven by scroll è attualmente supportata nei seguenti browser:

Supporto dei browser

  • Chrome: 115.
  • Edge: 115.
  • Firefox: dietro una bandiera.
  • 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.

Confronto tra API CSS per le animazioni basate sullo scorrimento e JavaScript classico

La barra di avanzamento dell'esempio seguente viene creata utilizzando tecniche delle classi JavaScript.

Il documento risponde ogni volta che si verifica l'evento scroll per calcolare la percentuale di scrollHeight a cui l'utente ha fatto scorrere.

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 così tutte le attività più complesse.

Questa è la parte interessante: supponiamo che tu abbia implementato un calcolo molto pesante su entrambe le versioni del sito web, che avrebbe consumato la maggior parte delle risorse dei thread principali. 

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 è completamente influenzata dall'intensa attività 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. Utilizzando JavaScript puoi creare anche animazioni fluide e scorrevoli. 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,
    }),
  }
);

Ciò ti consente di creare la stessa animazione della barra di avanzamento mostrata nella precedente demo CSS 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 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 dare un'occhiata alle diverse implementazioni dell'animazione basata sullo scorrimento in questo sito demo, in cui puoi confrontare demo utilizzando queste nuove API CSS e JavaScript.

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