Animazioni allo scorrimento in CSS: con Firefox 159 funzionano ovunque

Il 27 ottobre 2026 è uscito Firefox 159, che attiva per impostazione predefinita le animazioni CSS guidate dallo scorrimento: effetti che avanzano mentre l'utente scorre la pagina, invece che con il passare del tempo. Lo riportano le note per sviluppatori su MDN e le note di rilascio ufficiali di Mozilla. Chrome le supporta dalla versione 115, del 2023, e Safari dalla 26, uscita a settembre 2025 come ricorda il blog di WebKit: con Firefox, la funzione è ora disponibile nei tre motori principali.

Cosa sono le animazioni guidate dallo scorrimento?

Pensa alla barra sottile in cima a un articolo che si riempie mentre leggi, a un'immagine che entra in dissolvenza quando arriva sullo schermo, a un titolo che si rimpicciolisce quando scorri verso il basso. Finora questi effetti si ottenevano quasi sempre con JavaScript, spesso con librerie esterne, che ascoltano lo scorrimento e ricalcolano gli stili di continuo.

Con le nuove proprietà CSS, lo stesso effetto si dichiara nel foglio di stile. Firefox 159 introduce le proprietà animation-timeline, scroll-timeline, view-timeline e animation-range, e le interfacce ScrollTimeline e ViewTimeline per chi vuole controllarle da JavaScript. In pratica si dice al browser: «questa animazione non segue l'orologio, segue la posizione di scorrimento», oppure «segue la comparsa di questo elemento nella finestra».

Le altre novità di Firefox 159 per chi sviluppa

Secondo MDN, la stessa versione:

• rimuove la vecchia sintassi sperimentale «masonry» per le griglie a mattoncino, a favore del nuovo valore grid-lanes della proprietà display;
• supporta registri di custom element separati per ogni shadow tree, utili quando più componenti web usano lo stesso nome;
• fa lavorare l'API Sanitizer durante l'analisi dell'HTML, un passo avanti per inserire contenuti esterni in modo sicuro.

Cosa cambia per una PMI italiana

Per il visitatore, nulla di visibile: gli effetti sono gli stessi di prima. Per il sito, invece, cambia molto.

1. Pagine più leggere. Meno JavaScript da scaricare ed eseguire significa caricamenti più rapidi, soprattutto sui telefoni di fascia media.
2. Animazioni più fluide. Il browser può gestire questi effetti in modo più efficiente rispetto a uno script che reagisce a ogni movimento.
3. Meno dipendenze. Una libreria in meno è una cosa in meno da aggiornare e da tenere sicura.

C'è però un rovescio della medaglia, e lo dico per esperienza: gli effetti allo scorrimento sono facili da esagerare. Testi che compaiono solo dopo un certo scorrimento, pagine che sembrano vuote finché non si muove il dito, contenuti che restano invisibili se l'animazione non parte. Su un sito aziendale, il contenuto deve esserci sempre, anche senza animazioni.

Cosa fare adesso

• Se il sito usa librerie per gli effetti allo scroll, al prossimo intervento di manutenzione valuta se alcune animazioni semplici si possono riscrivere in CSS.
• Rispetta chi riduce il movimento. Il sistema operativo permette di chiedere meno animazioni: il CSS può leggerlo con la media query prefers-reduced-motion, e va sempre fatto.
• Prevedi il caso senza supporto. Chi usa un browser vecchio deve vedere la pagina completa, solo senza effetto.
• Prova su un telefono vero, non solo sul computer.

Quando realizzo un sito aziendale, uso le animazioni con misura e sempre con un'alternativa per chi non le vuole: è anche una questione di accessibilità. Nei siti già online, sostituire script pesanti con CSS è un intervento che rientra nella manutenzione e migliora la velocità; ne ho scritto nella guida ai Core Web Vitals.

Ne parliamo?

Se il tuo sito è bello ma lento, o pieno di effetti che rallentano il telefono, scrivimi: guardo cosa si può alleggerire senza perdere l'aspetto che ti piace. È un lavoro che faccio spesso nei siti aziendali.

Fonti

• MDN: Firefox 159 release notes for developers
• Mozilla: Firefox 159.0 release notes
• WebKit: WebKit Features in Safari 26.0

Crediti delle immagini

• Copertina: foto di Serhat Beyazkaya su Unsplash