Reduced motion negli effetti WebGL e GSAP: cosa insegnano quattro casi Codrops

Nelle ultime due settimane Codrops ha pubblicato quattro making-of di esperienze web molto animate: un cortometraggio in Three.js, un redesign con GSAP e model-viewer, una tipografia con scia guidata dallo scroll e una libreria React per fogli di carta 3D. Letti insieme mostrano quattro modi diversi di trattare il movimento ridotto, da nessuno a una soluzione ben ragionata. Per chi realizza siti ad alto impatto visivo sono quattro esempi concreti di scelte da fare prima di consegnare.

Una premessa sul metodo: sono tutti racconti dei rispettivi autori. Non riportano misure indipendenti e, dove parlano di accessibilità, non citano test con screen reader o tastiera. Quello che segue è cosa dichiarano i testi, non un collaudo.

Livello uno: la media query come interruttore

Nel making-of del cortometraggio "Chasing the Moment" (12 ottobre) la regola è radicale: con prefers-reduced-motion attivo il film viene saltato del tutto. I canvas sono nascosti agli screen reader con aria-hidden e ne esiste una versione scritta. Sopra la scena, i pulsanti per scegliere se avviare il film con o senza audio sono veri pulsanti HTML, invisibili ma raggiungibili da tastiera. L'autore ha anche scelto che Invio avvii la versione senza suono, perché far partire l'audio senza una richiesta dell'utente non gli sembrava il comportamento giusto.

Livello due: la media query che non copre tutto

La libreria paperlab, presentata il 18 ottobre, ferma il foglio con prefers-reduced-motion: tessuto, comportamenti e deformazioni in movimento si bloccano. Il fuoco, invece, non legge l'impostazione, e l'articolo lo dichiara: chi integra il fuoco deve decidere come mostrare una combustione in modalità ridotta. Il progetto è in beta, con motore completo ed editor e sito ancora in lavorazione. È un caso utile perché mostra un buco comune: si gestisce l'elemento principale e si dimentica l'effetto accessorio, che spesso è quello più vistoso.

Livello tre: nessuna gestione dichiarata

Nell'articolo sulle scie tipografiche del 13 ottobre non compaiono prefers-reduced-motion, comandi per fermare l'animazione, tastiera o screen reader, e il movimento dell'hero prosegue da solo senza alternativa statica. Non significa che il progetto non le abbia, significa che il testo non ne parla. Sul piano delle prestazioni, invece, descrive scelte precise: glifi disegnati una sola volta su canvas fuori schermo, tetto di 40 fps per lo scheduler principale, rendering saltato a scheda nascosta, disegno limitato alle sezioni vicine al viewport, densità di pixel limitata a 1,25 per i canvas dei glifi.

Livello quattro: un toggle che porta alla fine, non in pausa

Il caso più interessante è il redesign del sito Noho, raccontato il 15 ottobre. Oltre alle scelte di performance (coda di lavori ordinata per urgenza e distanza dall'elemento, rendering 3D messo in pausa fuori schermo, un solo aggiornamento del cursore per frame con gsap.quickTo), il sito ha un interruttore Reduce Motion salvato in locale. Se lo attivi mentre un'animazione è in corso, il sito non la mette in pausa: la porta direttamente allo stato finale. Il motivo, riportato dall'articolo, è che una semplice pausa potrebbe lasciare un titolo sbiadito o a metà del suo spostamento. Ogni animazione registrata ha una funzione snap() che chiude le animazioni attive e posiziona l'elemento dove deve stare; se manca, il sistema azzera y e top e richiama l'eventuale callback di fine.

L'articolo non dice se l'interruttore legga anche l'impostazione di sistema né riporta test con tecnologie assistive. Lo segnalo come lacuna del testo, non come prova che manchino. Gli stessi autori dichiarano i compromessi: il primo caricamento delle scene 3D costa, e le scene in cache occupano memoria.

Cosa si può portare nel proprio progetto

• Parti dalla media query, ma decidi per ogni effetto che cosa significa "ridotto": fermo, saltato, sostituito da una versione statica. Elenca gli effetti accessori, come il fuoco di paperlab, che non rientrano nel sistema principale.
• Se offri un interruttore manuale, definisci lo stato finale di ogni animazione. Una pausa a metà può lasciare l'interfaccia illeggibile.
• Se la scena è in un canvas, metti sopra elementi HTML reali per i comandi e prevedi una versione testuale per chi usa uno screen reader.
• Considera il movimento un costo: pausa fuori schermo e a scheda nascosta, tetto ai frame, densità di pixel limitata, istanze invece di oggetti separati (paperlab disegna una galleria di quaranta fogli in una sola chiamata istanziata).

Un caso a parte è quello delle transizioni di pagina con GSAP e React Router descritte da Codrops l'8 ottobre: l'autore segnala che il supporto a prefers-reduced-motion richiede di gestire a mano un flag e che il focus della pagina in uscita non è gestito. È la stessa famiglia di problemi, in un contesto diverso. Di quell'articolo ho usato soltanto quanto riportato nel digest della settimana.

Fonti

1. Codrops, “Chasing the Moment”, 12 ottobre 2026
2. Codrops, “Typography That Leaves a Trace”, 13 ottobre 2026
3. Codrops, “Knowing When to Do Less: Noho”, 15 ottobre 2026
4. Codrops, “Real Folds, Real Fire”, 18 ottobre 2026
5. Codrops, “Building Parallel Page Transitions with GSAP and React Router”, 8 ottobre 2026 (solo tramite digest)