Animazioni per Gutenberg senza JavaScript: guida CSS puro

Le animazioni rendono un sito web più coinvolgente, professionale e memorabile. Ma fino a oggi, per avere animazioni scroll-driven dovevi fare una scelta dolorosa: performance o effetti? In questo articolo vediamo come creare animazioni per Gutenberg senza JavaScript, sfruttando le potenzialità native del CSS moderno, e come garantire la compatibilità con tutti i browser usando un polyfill progressivo.

Il costo nascosto delle librerie JavaScript per animazioni

Ogni libreria JavaScript che aggiungi al tuo sito ha un costo. Ecco l’impatto concreto delle librerie di animazioni più popolari:

Come funzionano le animazioni scroll-driven CSS

Le animazioni scroll-driven CSS usano la proprietà animation-timeline: view(), supportata nativamente da Chrome 115+, Edge 115+ e Opera 101+. Non richiedono JavaScript, non occupano il thread principale del browser e non impattano i Core Web Vitals.

La sintassi è semplice e dichiarativa:

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

I 12 pack di animazioni senza JavaScript

Le animazioni scroll-driven CSS coprono praticamente ogni esigenza. Ecco le categorie principali di effetti che puoi creare senza JavaScript:

Scroll Effects (animazioni che partono con lo scroll)

• Fade: fade-in, fade-up, fade-down, fade-left, fade-right
• Slide: slide-up, slide-down, slide-left, slide-right
• Zoom: zoom-in, zoom-out
• Float: float, float-inv (effetto galleggiante)
• Rotate: rotate, rotate-inv
• Flip: flip-x, flip-y (3D perspective)
• Scale: scale-up, scale-down

Attention Effects (animazioni ad attenzione)

• Bounce: effetto rimbalzo all’ingresso
• Blur: da sfocato a nitido
• Shake: scossa per attirare l’attenzione
• Pulse: pulsazione continua

Text Effects (animazioni per il testo)

• Text reveal: svelamento lettera per lettera
• Wave: effetto onda sul testo
• Pop: lettere che appaiono in sequenza
• Glow: bagliore graduale

Mask & Reveal (effetti di rivelazione)

• Circle reveal: rivelazione circolare
• Slide reveal: svelamento laterale
• Curtain: effetto tendina
• Mask gradient: maschera graduale

La sfida della compatibilità cross-browser

Il problema principale delle animazioni scroll-driven CSS è che non sono ancora supportate da tutti i browser. Safari ha un supporto parziale, Firefox è ancora in fase di sviluppo. Come si risolve?

La soluzione è un polyfill progressivo che funziona in tre strati:

1. CSS nativo: le animazioni sono scritte con animation-timeline: view() e funzionano perfettamente su Chrome, Edge e Opera
2. Fallback CSS: aggiungendo animation-duration: 1s e animation-iteration-count: 2 con direction: alternate, i browser non supportati mostrano comunque un’animazione temporale (non scroll-driven, ma visibile)
3. Polyfill JS: con CSS.supports('animation-timeline', 'view()') rilevi il supporto. Se non supportato, attivi uno scroll observer che mappa la posizione dell’elemento all’avanzamento dell’animazione

Esempio completo di animazione senza JavaScript in Gutenberg

/* 1. Definisci l'animazione in CSS */
.cb-fade-up {
    animation: cbFadeUp 1s ease both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
}

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

/* 2. Applica al blocco Gutenberg */
/* Nel campo "Classe CSS aggiuntiva" di un blocco, scrivi: cb-fade-up */

ClassyBlocks Pro: animazioni Gutenberg senza codice

ClassyBlocks Pro è un plugin che porta 151 animazioni scroll-driven in Gutenberg, con un approccio unico:

• 12 pack di animazioni: Essential Scroll, Hero Effects, Text Effects, Mask & Reveal, Hover Effects, Background Effects, Loading & Progress, Mouse Magic, Attention Grabbers, Extra Attention, Special Scroll, Entrance Effects
• Zero JS sui browser moderni: Chrome, Edge e Opera usano animation-timeline nativa
• Polyfill automatico: Safari, Firefox e browser legacy ricevono lo stesso effetto via JS polyfill
• CSS fallback: se JS è disabilitato, le animazioni partono con durata 1s
• Integrazione Gutenberg: pannello visuale con preview live, applicazione con un click