Come animare i blocchi Gutenberg durante lo scroll

Uno degli effetti visivi più apprezzati dagli utenti è vedere gli elementi che “prendono vita” mentre scrollano la pagina. Un titolo che appare, una card che scivola in posizione, un”immagine che si ingrandisce: sono piccole animazioni che trasformano un sito statico in un”esperienza dinamica e coinvolgente. In questa guida vediamo come animare i blocchi Gutenberg durante lo scroll, con tecniche che vanno dal CSS puro fino a soluzioni integrate.

Perchè animare i blocchi Gutenberg allo scroll

Le animazioni scroll-triggered migliorano l”esperienza utente in modi concreti:

• Guidano l”attenzione: gli elementi animati attirano lo sguardo in modo naturale
• Creano una gerarchia visiva: gli elementi più importanti si animano per primi
• Riducono il carico cognitivo: invece di vedere tutto subito, gli utenti scoprono il contenuto gradualmente
• Aumentano il tempo di permanenza: le animazioni rendono la navigazione più piacevole
• Comunicano professionalità: un sito con animazioni curate appare più moderno e curato

Il metodo CSS nativo: animation-timeline

Il modo più semplice e performante per animare i blocchi Gutenberg allo scroll è usare animation-timeline: view(). Questa proprietà CSS lega l”animazione alla posizione dell”elemento nel viewport.

/* Definisci l''animazione */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Classe da applicare ai blocchi */
.cb-fade-up {
    animation: fadeUp 1s ease both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
}

Poi, nel campo “Classe CSS aggiuntiva” del blocco Gutenberg, inserisci cb-fade-up. Il blocco si animerà automaticamente durante lo scroll.

Tutti i tipi di animazione per i blocchi Gutenberg

Fade (trasparenza)

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

/* Fade Up: appare dal basso */
.cb-fade-up {
    animation: cbFadeUp 1s ease both;
    animation-timeline: view();
}
@keyframes cbFadeUp { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: translateY(0); } }

/* Fade Down: appare dall''alto */
.cb-fade-down {
    animation: cbFadeDown 1s ease both;
    animation-timeline: view();
}
@keyframes cbFadeDown { from { opacity: 0; transform: translateY(-60px); } to { opacity: 1; transform: translateY(0); } }

/* Fade Left: appare da sinistra */
.cb-fade-left {
    animation: cbFadeLeft 1s ease both;
    animation-timeline: view();
}
@keyframes cbFadeLeft { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } }

/* Fade Right: appare da destra */
.cb-fade-right {
    animation: cbFadeRight 1s ease both;
    animation-timeline: view();
}
@keyframes cbFadeRight { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: translateX(0); } }

Slide (scorrimento)

.cb-slide-up {
    animation: cbSlideUp 1s ease both;
    animation-timeline: view();
}
@keyframes cbSlideUp { from { transform: translateY(100px); } to { transform: translateY(0); } }

Zoom (ingrandimento)

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

Float (galleggiante)

.cb-float {
    animation: cbFloat 1s ease both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
}
@keyframes cbFloat { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-15px) rotate(2deg); } 100% { transform: translateY(0) rotate(0deg); } }

Animazioni a cascata (staggered)

Uno degli effetti più belli è quando gli elementi si animano uno dopo l”altro, creando un effetto “onda”. Per farlo, usa ritardi crescenti:

/* Elementi in sequenza con ritardo progressivo */
.gruppo-card > .wp-block-column:nth-child(1) { animation-delay: 0s; }
.gruppo-card > .wp-block-column:nth-child(2) { animation-delay: 0.15s; }
.gruppo-card > .wp-block-column:nth-child(3) { animation-delay: 0.3s; }
.gruppo-card > .wp-block-column:nth-child(4) { animation-delay: 0.45s; }

Quali blocchi animare e come

Animare i blocchi Gutenberg senza codice

ClassyBlocks Pro rende tutto questo incredibilmente semplice. Il plugin aggiunge un pannello “Animazioni” nell”editor Gutenberg, dove puoi:

• Scegliere tra 151 animazioni in 12 pack
• Vedere l”anteprima live nell”editor (mouseover per testare)
• Applicare l”animazione a qualsiasi blocco con un click
• Gestire animazioni scroll-driven, hover, text, mask e molto altro
• Polyfill automatico per browser legacy

Dalla scelta all”applicazione: meno di 5 secondi. Nessuna riga di CSS o JavaScript da scrivere.