Animazioni scroll-driven CSS in WordPress: guida completa

Le animazioni scroll-driven rappresentano una delle innovazioni più significative nel mondo del CSS moderno. Con la proprietà animation-timeline: view(), puoi creare animazioni che si attivano e progrediscono in base alla posizione dello scroll dell’utente, senza una riga di JavaScript. In questa guida completa vedremo come funzionano, come implementarle in WordPress e come sfruttarle al massimo per creare siti web coinvolgenti e performanti.

Cosa sono le animazioni scroll-driven

Le animazioni scroll-driven sono animazioni CSS che avanzano in base alla posizione dello scroll dell’utente, non in base al tempo. Questo significa che l’animazione è legata al movimento della pagina: mentre l’utente scrolla verso il basso, l’animazione progredisce. Mentre scrolla verso l’alto, l’animazione regredisce. Il risultato è un effetto naturale e fluido, come se gli elementi “prendessero vita” mentre appaiono sullo schermo.

La rivoluzione di animation-timeline: view()

Prima dell’introduzione di animation-timeline, per creare animazioni scroll-driven dovevi usare librerie JavaScript come AOS, GSAP o ScrollMagic. Queste librerie funzionavano ascoltando l’evento scroll del browser e calcolando manualmente la posizione degli elementi. Il problema? Ogni libreria aggiungeva decine di KB al caricamento della pagina, occupava il thread principale del browser e impattava negativamente sui Core Web Vitals.

Con animation-timeline: view(), le animazioni sono gestite nativamente dal browser. Non c’è JavaScript da scaricare, analizzare o eseguire. Il browser si occupa di tutto, su un thread separato, senza influenzare le performance della pagina.

Come funziona animation-timeline: view()

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.elemento-animato {
    animation: fadeInUp 1s ease both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
}

Analizziamo ogni parte:

• @keyframes fadeInUp: definiamo l’animazione come faremmo normalmente
• animation: fadeInUp 1s ease both: specifichiamo l’animazione (la durata di 1s viene ignorata dai browser che supportano animation-timeline, ma serve come fallback)
• animation-timeline: view(): è la chiave di tutto. Dice al browser di legare l’animazione alla posizione dell’elemento nel viewport
• animation-range: entry 0% entry 100%: definisce quando l’animazione inizia (0% = l’elemento inizia a entrare) e quando finisce (100% = l’elemento è completamente entrato)

I valori di animation-range spiegati

• entry: da quando l’elemento inizia a entrare nel viewport a quando è completamente visibile
• exit: da quando l’elemento inizia a uscire a quando è completamente uscito
• cover: copre l’intero passaggio dell’elemento attraverso il viewport (dall’inizio dell’ingresso alla fine dell’uscita)
• contain: l’animazione vale solo quando l’elemento è completamente visibile (dal momento in cui è entrato a quando inizia a uscire)

Puoi combinare questi valori per effetti precisi:

/* Effetto che inzia quando l'elemento è entrato al 20% e finisce quando è uscito al 50% */
animation-range: entry 20% exit 50%;

/* Effetto che vale solo quando l'elemento è completamente visibile */
animation-range: contain 0% contain 100%;

Esempi pratici di animazioni scroll-driven

Fade In classico

.fade-in { animation: fadeIn 1s ease both; animation-timeline: view(); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

Slide Up con fade

.slide-up { animation: slideUp 1s ease both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
@keyframes slideUp { from { opacity: 0; transform: translateY(80px); } to { opacity: 1; transform: translateY(0); } }

Zoom In progressivo

.zoom-in { animation: zoomIn 1s ease both; animation-timeline: view(); }
@keyframes zoomIn { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }

Rivelazione laterale

.slide-right { animation: slideRight 1s ease both; animation-timeline: view(); }
@keyframes slideRight { from { opacity: 0; transform: translateX(-100px); } to { opacity: 1; transform: translateX(0); } }

Browser support e polyfill

Per garantire la compatibilità cross-browser, la strategia migliore è il polyfill progressivo: usi le animazioni CSS native come base (funzionano perfettamente su Chrome, Edge, Opera) e aggiungi un polyfill JS automatico per Safari e Firefox.

Implementazione in WordPress

Puoi aggiungere le animazioni CSS al tuo tema e applicare le classi ai blocchi Gutenberg. Per semplificare il processo, ClassyBlocks Pro include 151 animazioni scroll-driven già pronte in 12 pack (Essential Scroll, Hero Effects, Text Effects, Mask & Reveal e molti altri), con polyfill automatico per browser legacy e integrazione visuale in Gutenberg. Nessuna configurazione necessaria.