Quali sono le novità relative alle animazioni con scorrimento?
Le animazioni con 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 coinvolti gli utenti e rendere il tuo sito web visivamente più accattivante.
In passato, l'unico modo per creare animazioni con 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, di conseguenza, genera gli eventi di scorrimento in modo asincrono.
- Le animazioni dei thread principali sono soggette a jank.
Per questo motivo, è impossibile o molto difficile creare animazioni ad alte prestazioni sincronizzate con lo scorrimento.
Stiamo ora introducendo un nuovo set di API per supportare le animazioni con scorrimento, che puoi utilizzare da CSS o JavaScript. L'API cerca di utilizzare il minor numero possibile di risorse dei thread, rendendo le animazioni con scorrimento molto più facili da implementare e molto più fluide. L'API per le animazioni con 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 animazioni basate su scorrimento con la nuova API.
Confronto tra API CSS delle animazioni con scorrimento e JavaScript classico
La barra di avanzamento di esempio che segue è stata creata utilizzando le tecniche JavaScript delle classi.
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 demo seguente 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 della sequenza temporale dell'animazione converte automaticamente una posizione in un intervallo di scorrimento in una percentuale di avanzamento, eseguendo così tutte le operazioni più impegnative.
Ora 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 forse ti aspettavi, la versione classica di JavaScript diventa scadente e lenta a causa della giunzione delle risorse dei thread principali. La versione CSS, invece, è completamente influenzata dal lavoro intensivo di JavaScript e può rispondere alle interazioni di scorrimento dell'utente.
L'utilizzo della CPU è completamente diverso in DevTools, come mostrato negli screenshot che seguono.
La seguente demo mostra un'applicazione di animazione basata su scorrimento creata da CyberAgent. Puoi vedere che la foto scompare mentre scorri.
Nuova API JavaScript per animazioni con scorrimento e JavaScript classico
Il vantaggio della nuova API non è limitato solo ai CSS. Puoi anche creare animazioni fluide e guidate da 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 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 dei thread, rendendo le animazioni molto più fluide rispetto all'approccio JavaScript classico.
Inoltre, questa nuova API funziona in combinazione con l'API Web Animations (WAAPI) e l'API CSS Animations esistenti per abilitare animazioni dichiarative basate su scorrimento.
Altre demo e risorse
Puoi scoprire le diverse implementazioni dell'animazione basata sullo scorrimento tramite questo sito dimostrativo, dove puoi confrontare le demo utilizzando queste nuove API di CSS e JavaScript.
Se vuoi scoprire di più sulle nuove animazioni con scorrimento, dai un'occhiata a questo articolo e alla conferenza I/O 2023.