Configurare animazioni legate allo scorrimento

Le animazioni collegate allo scorrimento vengono eseguite, messe in pausa o invertite in base alla visibilità dell'elemento. Esempi: una dissolvenza in entrata dell'hero quando una sezione entra nell'area visibile, un numero che aumenta quando è visibile o un effetto parallasse legato alla posizione di scorrimento. IntersectionObserver attiva le animazioni, mentre CSS o la Web Animations API le esegue.

Il modello più semplice consiste nell'aggiungere a un elemento una classe CSS che contiene l'animazione quando entra nel viewport. Nel callback dell'observer si utilizza entry.target.classList.add("in-view"); la classe definisce animation: fade-in 600ms forwards.

Crei un observer condiviso, osservi ogni elemento con la classe trigger, aggiunga "in-view" quando si verifica l'intersezione e utilizzi unobserve per evitare di riattivare l'animazione. Per le animazioni eseguite una sola volta è tutto ciò che serve; per ripeterle quando l'elemento rientra nel viewport, non utilizzi unobserve e rimuova la classe all'uscita.

Per mostrare in sequenza gli elementi di un elenco, applichi a ciascun elemento un ritardo specifico tramite una proprietà personalizzata CSS: style="--delay: ${i * 100}ms"; l'animazione legge animation-delay: var(--delay). Gli elementi vengono animati a cascata quando l'elenco entra nell'area visibile.

threshold: 0.2 si attiva quando il 20% dell'elemento è visibile: di solito è un buon momento per le animazioni "in-view". threshold: 0 si attiva troppo presto, anche per un solo pixel, e l'effetto risulta brusco; threshold: 1 si attiva troppo tardi, quando l'elemento è completamente visibile, e l'effetto sembra ritardato.

Le animazioni attivate dallo scorrimento vengono eseguite una volta quando si verifica l'intersezione, come descritto sopra. Le animazioni collegate allo scorrimento fanno avanzare il proprio progresso in sincronia con la posizione di scorrimento. L'approccio moderno consiste nelle animazioni CSS guidate dallo scorrimento (animation-timeline: scroll()), mentre IntersectionObserver rimane utile per l'ingresso e l'uscita dalle zone di attivazione.

Animi le proprietà che la GPU può trasformare in modo efficiente: transform e opacity. Eviti di animare top, left, width e height: attivano il layout a ogni frame e fanno scattare le animazioni legate allo scorrimento sui dispositivi di fascia media.

Racchiuda le dichiarazioni delle animazioni in @media (prefers-reduced-motion: no-preference), così gli utenti che richiedono una riduzione del movimento, ad esempio per disturbi vestibolari o sensibilità, ricevono lo stato finale statico senza movimento. In modalità con movimento ridotto, le animazioni decorative dovrebbero essere disattivate completamente.

Utilizzi un solo observer condiviso, non uno per elemento. Utilizzi unobserve dopo l'attivazione di un'animazione eseguita una sola volta. Utilizzi will-change con parsimonia, solo sugli elementi attualmente animati, e lo rimuova al termine dell'animazione. Controlli il pannello Performance per individuare i frame persi.

Per le animazioni che devono invertirsi quando l'elemento esce dal viewport, non utilizzi unobserve. Nel callback, alterni la classe in base a isIntersecting: entry.target.classList.toggle("in-view", entry.isIntersecting). L'animazione procede in avanti all'ingresso e si inverte all'uscita.

Per le animazioni gestite da JS, sostituisca classList.add con entry.target.animate(keyframes, options). WAAPI restituisce un oggetto Animation che può essere messo in pausa, invertito o concatenato tramite promise: è più flessibile di CSS per le sequenze complesse.

Perché nelle animazioni collegate allo scorrimento è preferibile animare transform e opacity invece di top, left, width e height?

Le animazioni collegate allo scorrimento combinano IntersectionObserver con classi di animazione CSS o WAAPI. Imposti uno stato nascosto, aggiunga "in-view" quando si verifica l'intersezione, animi transform e opacity, non top e left, rispetti prefers-reduced-motion e utilizzi proprietà personalizzate CSS per sfalsare le animazioni e ottenere rivelazioni a cascata. Per animazioni basate sull'intero progresso dello scorrimento, valuti le animazioni native guidate dallo scorrimento (animation-timeline: scroll()).