Le scroll-linked animations rappresentano una delle evoluzioni più interessanti del web moderno: permettono di sincronizzare le animazioni con il movimento dello scroll, offrendo esperienze utente fluide, dinamiche e reattive. Con le nuove proprietà view-timeline e animation-timeline introdotte nello specifica della CSS Scroll-Linked Animations, è oggi possibile gestire queste interazioni in modo nativo, senza dipendere da librerie esterne o hack.
Introduzione alle animazioni scroll-linked
Le animazioni legate allo scroll non sono una novità: spesso si sono realizzate con librerie come AOS.js o ScrollTrigger di GSAP. Tuttavia, fino a poco tempo fa, non esisteva un modo standardizzato per controllare in CSS il progresso di un’animazione in base alla posizione dello scroll. Le nuove specifiche CSS, ora supportate in browser moderni come Chrome e Edge, rendono questo possibile nativamente.
Se vuoi approfondire le basi delle animazioni al scroll con librerie più tradizionali, leggi anche Animazioni Scroll-Triggered con AOS.js o Come Creare uno Scrolling Orizzontale con GSAP e ScrollTrigger.
Cosa sono view-timeline e animation-timeline
La proprietà view-timeline definisce una timeline basata sulla visibilità di un elemento nella viewport. In altre parole, il progresso dell’animazione dipende da quanto l’elemento è visibile nello schermo durante lo scroll. La proprietà animation-timeline lega uno specifico effetto di animazione a una determinata timeline, che può essere temporale o basata sullo scroll.
.sezione {
view-timeline-name: --titolo-timeline;
view-timeline-axis: block; /* vertical oppure inline */
}
h1 {
animation: fadeIn 1s linear both;
animation-timeline: --titolo-timeline;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(50px); }
to { opacity: 1; transform: translateY(0); }
}
In questo esempio, l’intestazione h1 si anima in base alla visibilità della sezione contenente, con effetto progressivo durante lo scroll.
Vantaggi delle animazioni legate allo scroll
- Prestazioni migliori: poiché gestite dal motore CSS, sono spesso più leggere rispetto alle soluzioni con JavaScript.
- Semplicità: nessuna necessità di librerie esterne, meno JS da mantenere.
- Accessibilità: integrandosi nativamente nel flusso del rendering, rispettano le impostazioni di riduzione del movimento del sistema operativo.
- Precisione: maggiore sincronizzazione con il layout e scroll nativo.
Per ottenere risultati ancora più fluidi puoi combinare queste tecniche con approcci descritti in Sviluppo di un’esperienza utente fluida con le animazioni CSS.
Implementazione di view-timeline in CSS
Definire una view-timeline richiede due passaggi principali: definire la timeline su un elemento e assegnarla ad un’animazione. Ecco un esempio pratico di fade sequence all’interno di una sezione scorrevole.
.blocco-testo {
view-timeline-name: --blocco-timeline;
view-timeline-axis: block;
}
.blocco-testo p {
animation: slideIn 1s both;
animation-timeline: --blocco-timeline;
animation-range: entry 0% exit 100%;
}
@keyframes slideIn {
from { opacity: 0; transform: translateY(100px); }
to { opacity: 1; transform: translateY(0); }
}
La proprietà animation-range regola in quale intervallo di visibilità l’animazione avviene: da quando l’elemento entra (entry) fino a quando esce dalla viewport (exit).
È consigliabile testare l’effetto anche con Chrome DevTools che offre strumenti dedicati alla visualizzazione delle timeline scroll.
Utilizzo di animation-timeline con JavaScript
Nonostante la definizione sia tutta in CSS, possiamo gestire dinamicamente le animazioni scroll-linked anche via JavaScript, per maggiore controllo o per creare effetti condizionali.
const box = document.querySelector('.box');
// Creiamo una scroll timeline su un elemento
const timeline = new ScrollTimeline({
source: document.scrollingElement,
orientation: 'block',
});
// Colleghiamo l'animazione alla timeline
box.animate(
[ { transform: 'scale(0)', opacity: 0 }, { transform: 'scale(1)', opacity: 1 } ],
{
duration: 1,
timeline: timeline
}
);
Questa API di basso livello riflette ciò che avviene in CSS, ma consente logiche più complesse tramite JavaScript, ideali per sviluppatori frontend che desiderano ibridare logiche visive e interattive.
Puoi confrontare questo approccio con concetti simili descritti in JavaScript View Transitions API o con l’uso combinato di animazioni descritte in Creare Animazioni Interattive con CSS e JavaScript Puro.
Esempi pratici di scroll-linked animations
Esempio 1: Effetto Parallax elementare
.hero {
view-timeline-name: --hero-timeline;
view-timeline-axis: block;
}
.hero img {
animation: moveParallax 1s linear both;
animation-timeline: --hero-timeline;
animation-range: entry 0% exit 100%;
}
@keyframes moveParallax {
from { transform: translateY(0); }
to { transform: translateY(-100px); }
}
In questo esempio, l’immagine nella sezione .hero si sposta lentamente verso l’alto mentre l’utente scrolla la pagina, simulando un effetto parallax nativo (vedi anche Effetto Parallax e Scrolling Animato per Siti Web Moderni).
Esempio 2: Timeline complessa per sezioni alternate
section {
view-timeline-name: --section-timeline;
view-timeline-axis: block;
}
section .contenuto {
animation: fadeSlide 1s both;
animation-timeline: --section-timeline;
animation-range: entry 0% exit 80%;
}
@keyframes fadeSlide {
from { opacity: 0; transform: translateX(100px); }
to { opacity: 1; transform: translateX(0); }
}
Questo pattern è utile per siti con storytelling verticale, in cui ogni sezione deve animarsi al proprio ingresso visivo.
Esempio 3: Animazione di progress bar scroll-linked
<div class="progress-wrapper">
<div class="progress-bar"></div>
</div>
.progress-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: #ddd;
}
.progress-bar {
height: 4px;
background: linear-gradient(90deg, #09f, #0cf);
animation-name: fillProgress;
animation-duration: 1s;
animation-timeline: scroll();
}
@keyframes fillProgress {
from { width: 0%; }
to { width: 100%; }
}
Qui la animation-timeline è direttamente collegata alla timeline di scroll complessiva del documento (scroll()), permettendo una barra di progressione totalmente gestita via CSS, senza una riga di JavaScript.
Best practices per performance e compatibilità
- Riduci i repaint: preferisci trasformazioni e opacità rispetto a proprietà layout-intensive come width o top.
- Fallback per browser non compatibili: usa feature queries
@supportsper gestire alternative (es. AOS.js o GSAP). - Prevedi la preferenza utente di riduzione movimento: avvolgi le animazioni in
@media (prefers-reduced-motion: no-preference). - Debrief visivo: non esagerare con troppi elementi animati contemporaneamente, rischi saturazione percettiva.
Puoi approfondire le strategie di ottimizzazione delle prestazioni in Strategie avanzate per l’ottimizzazione delle animazioni CSS con variabili o in Ottimizzare le prestazioni delle animazioni CSS attraverso l’AI.
Conclusione e risorse aggiuntive
Le proprietà view-timeline e animation-timeline aprono la strada a un futuro in cui le scroll-linked animations possono essere gestite in CSS in modo potente e performante. Sono strumenti ancora giovani, ma con un potenziale enorme per il design d’interfacce e le esperienze visive immersive. Ricorda di garantire sempre accessibilità, prestazioni e coerenza visuale tra dispositivi. Per ulteriori esempi pratici puoi consultare la documentazione ufficiale su MDN (MDN Scroll-linked Animations) e sperimentare integrando gli esempi in contesti reali.
