EN IT
Home Chi sono Learn Blog

Animazioni Staggered Responsive in Webflow (Solo CSS)

Intermedio 37:14 webflowcssanimationstaggeredresponsive

Costruisci un reveal staggered slide-and-fade responsive in Webflow senza JavaScript, usando un attributo, la proprietà CSS transition-delay e media query con nth-child.

Guarda su YouTube

Punti chiave

  • Webflow rileva solo quando entra in viewport l'intera griglia o un singolo elemento — mai una riga intera — quindi uno stagger nativo senza codice si rompe non appena le colonne si riorganizzano tra i breakpoint.
  • L'effetto si regge sulla proprietà CSS `transition-delay` più le transizioni dell'elemento; l'interazione scroll-into-view di Webflow non fa che riportare lo stato finale (move a 0, opacity a 100) con durata zero.
  • Il selettore `:nth-child()` è il motore — il coefficiente prima di `n` è uguale al numero di colonne a quel breakpoint, e il numero dopo il meno è l'indice della colonna (dal numero-di-colonne-meno-uno per la prima colonna fino a 0 per l'ultima).
  • Un building block per colonna, una media query per breakpoint: per adattare il codice a qualsiasi layout devi solo far combaciare due numeri — il numero di colonne e l'indice della colonna.
  • Un singolo attributo (`fc-css-staggered="item"`) guida tutto, un valore diverso (`item-2`) fa partire uno stagger indipendente su una seconda griglia, e a differenza dell'approccio nativo funziona anche con le collection list del CMS.

Capitoli del video

  1. 00:00 Intro
  2. 01:42 Perché non puoi creare animazioni staggered nativamente in Webflow
  3. 07:58 La soluzione: attributi, transizioni e il breakdown del CSS
  4. 22:07 Esempio #1: aggiungere un nuovo breakpoint
  5. 25:21 Esempio #2: due griglie con numeri di colonne diversi nella stessa pagina
  6. 29:49 Esempio #3: collection list e layout complesso
  7. 35:48 Prossima sfida
  8. 36:37 Outro

Puoi costruire un reveal staggered slide-and-fade responsive in Webflow senza scrivere una sola riga di JavaScript — bastano un attributo e un piccolo blocco di CSS costruito attorno alla proprietà transition-delay. È la stessa idea che abbiamo usato per le animazioni del testo, solo che ora si adatta ai breakpoint, sopravvive a qualsiasi numero di colonne e funziona persino con il CMS.

Il motivo per cui serve un trucco è che Webflow non riesce a “vedere” una riga. Può far partire un’animazione quando l’intera griglia entra in viewport, o quando lo fa un singolo elemento — ma non quando una riga intera attraversa lo schermo, che è esattamente ciò che serve a uno stagger. I workaround nativi (spezzare ogni riga in una sua griglia) crollano non appena le colonne si riorganizzano a un breakpoint più piccolo, e non possono toccare i singoli elementi del CMS.

Così, invece di combattere Webflow, lasciamo fare al CSS la parte in cui è bravo. L’interazione resta banale; l’intelligenza vive in poche righe di CSS che puoi leggere, capire e modificare per qualsiasi layout.

Come funziona

L’interazione è quasi vuota, di proposito. Ogni elemento della griglia porta due transizioni CSS — una per il move transform, una per l’opacity (nel progetto di riferimento entrambe durano 800ms, con ease per l’opacity e ease-out cubic per il move). L’interazione scroll-into-view di Webflow fa poi il minimo indispensabile: due action, ciascuna con durata zero e senza easing, che riportano l’elemento a translateY(0) e opacity: 100%. Imposta il trigger perché agisca sulla classe, così costruendola una volta si applica a tutti i fratelli e il codice generato da Webflow resta leggero. Da sola non produce nulla di visibile — gli elementi sono già nella loro posizione finale — ed è qui che entra il CSS.

Il CSS imposta il punto di partenza e il ritmo. Un blocco di CSS custom punta ogni elemento tramite il suo attributo ([fc-css-staggered="item"]) e gli assegna uno stato iniziale: spostato in basso (circa 3rem sull’asse Y) e opacity: 0. Quando un elemento entra in viewport, la sua transizione lo porta da quel punto di partenza allo stato a riposo. Lo stagger non è altro che un transition-delay diverso per colonna: la prima colonna parte subito, la seconda un attimo dopo, e così via, così una riga sembra comparire a onde.

:nth-child() è tutto il motore. Per dare a ogni colonna il suo delay, il codice usa un “building block” per colonna, con questa forma: [fc-css-staggered="item"]:nth-child(Nn - i). Due numeri fanno tutto il lavoro: N, il coefficiente prima di n, è uguale al numero di colonne a quel breakpoint; i, il numero dopo il meno, è l’indice della colonna, che va da N - 1 per la prima colonna fino a 0 per l’ultima. Così in una griglia a quattro colonne, 4n - 3 prende la prima colonna, 4n - 2 la seconda e 4n la quarta.

Le media query lo rendono responsive. Poiché una griglia cambia il numero di colonne a seconda del breakpoint, avvolgi ogni set di building block in una query @media (min-width: …) — 480px (landscape), 768px (tablet), 992px (desktop), e così via. Ogni query sovrascrive quella sotto, così definisci solo ciò che cambia. È questa l’idea chiave: adattarsi a un nuovo layout non è mai una riscrittura, solo far combaciare il coefficiente con il numero di colonne e aggiungere un building block per colonna.

Come si usa

  1. Costruisci la griglia e marca gli elementi. Dai a ogni elemento dentro la griglia l’attributo fc-css-staggered con valore item. Poiché l’attributo vive su ogni elemento (non su una classe), configura il primo elemento e poi duplicalo — le copie ereditano l’attributo automaticamente.

  2. Aggiungi le due transizioni all’elemento. Sull’elemento della griglia, aggiungi una transizione per il move transform e una per l’opacity (es. 800ms, ease-out cubic per il move e ease per l’opacity). Sono queste ad animare davvero; l’interazione non fa che ribaltare lo stato finale.

  3. Costruisci un’interazione scroll-into-view minimale. Due action — move a translateY(0) e opacity a 100% — entrambe con durata 0 e senza easing. Imposta un offset (circa 20%) e, nelle impostazioni del trigger, scegli class così si applica a ogni elemento con quella classe.

  4. Incolla il CSS. Mettilo nel componente Global Styles (tutto il sito), nell’<head> della pagina (solo quella pagina), o in Site Settings → Custom Code → head (tutto il sito). Il blocco imposta lo stato iniziale e un transition-delay per colonna dentro una media query per ogni breakpoint.

  5. Taralo sul tuo layout. Per ogni breakpoint, tieni un building block per colonna, imposta il coefficiente prima di n sul numero di colonne, imposta l’indice dopo il meno da N - 1 fino a 0, e dai a ogni colonna il suo delay. Per aggiungere un nuovo breakpoint (diciamo un layout a cinque colonne a 1440px), copia una media query, cambia il suo min-width, porta il coefficiente a cinque, aggiungi un quinto building block e imposta i suoi delay.

  6. Due griglie, o il CMS. Per una seconda griglia, dai ai suoi elementi fc-css-staggered="item-2", duplica il CSS e sostituisci item con item-2 nei selettori — i due stagger restano indipendenti. Per una collection list, metti l’attributo sulla collection item; non cambia nient’altro, ed è proprio per questo che questo approccio funziona dove quello nativo non può.

Ecco la forma del CSS, ricostruita dalla spiegazione — lo stato iniziale, poi una media query per breakpoint con un building block per colonna:

/* Stato iniziale: ogni elemento parte spostato in basso e invisibile */
[fc-css-staggered="item"] {
  transform: translateY(3rem);
  opacity: 0;
}

/* Portrait — 1 colonna, nessuno stagger */
[fc-css-staggered="item"]:nth-child(1n - 0) { transition-delay: 0ms; }

/* Landscape — 2 colonne, da 480px */
@media screen and (min-width: 480px) {
  [fc-css-staggered="item"]:nth-child(2n - 1) { transition-delay: 0ms; }   /* colonna 1 */
  [fc-css-staggered="item"]:nth-child(2n - 0) { transition-delay: 100ms; } /* colonna 2 */
}

/* Tablet — 3 colonne, da 768px */
@media screen and (min-width: 768px) {
  [fc-css-staggered="item"]:nth-child(3n - 2) { transition-delay: 0ms; }   /* colonna 1 */
  [fc-css-staggered="item"]:nth-child(3n - 1) { transition-delay: 100ms; } /* colonna 2 */
  [fc-css-staggered="item"]:nth-child(3n - 0) { transition-delay: 300ms; } /* colonna 3 */
}

/* Desktop — 4 colonne, da 992px */
@media screen and (min-width: 992px) {
  [fc-css-staggered="item"]:nth-child(4n - 3) { transition-delay: 0ms; }   /* colonna 1 */
  [fc-css-staggered="item"]:nth-child(4n - 2) { transition-delay: 100ms; } /* colonna 2 */
  [fc-css-staggered="item"]:nth-child(4n - 1) { transition-delay: 300ms; } /* colonna 3 */
  [fc-css-staggered="item"]:nth-child(4n - 0) { transition-delay: 600ms; } /* colonna 4 */
}

/* Aggiungi un breakpoint a 5 colonne allo stesso modo:
@media screen and (min-width: 1440px) {
  [fc-css-staggered="item"]:nth-child(5n - 4) { transition-delay: 0ms; }
  [fc-css-staggered="item"]:nth-child(5n - 3) { transition-delay: 100ms; }
  [fc-css-staggered="item"]:nth-child(5n - 2) { transition-delay: 300ms; }
  [fc-css-staggered="item"]:nth-child(5n - 1) { transition-delay: 600ms; }
  [fc-css-staggered="item"]:nth-child(5n - 0) { transition-delay: 1000ms; }
} */

Un limite onesto da conoscere: tutto qui presuppone che ogni riga abbia lo stesso numero di colonne (può cambiare tra i breakpoint, ma non da riga a riga). Righe con numeri di colonne misti rompono la matematica di :nth-child — un rompicapo per un altro giorno.

Guida alla configurazione

Attributo Valori Default Cosa fa
fc-css-staggered item, item-2, … — Aggiungilo a ogni elemento della griglia che deve entrare nel reveal staggered — il CSS punta questo attributo, non una classe, così duplicando un elemento già configurato l'attributo viene ereditato. Usa un valore distinto per ogni griglia nella pagina (item, item-2, e così via) così più layout possono fare lo stagger in modo indipendente senza interferire.

Risorse

Domande frequenti

Perché non posso costruire un'animazione staggered responsive nativamente in Webflow?
Per fare lo stagger di una griglia devi sapere quando una singola riga entra in viewport, così ogni riga parte un attimo dopo quella sopra. Ma Webflow ti lascia usare come trigger solo l'intera griglia o il singolo elemento — non esiste un trigger a livello di riga. Puoi simularlo spezzando ogni riga in una sua griglia monodimensionale, ma si rompe non appena il layout si riorganizza (una riga a colonna singola torna bidimensionale ai breakpoint più larghi) e non può gestire i singoli elementi del CMS.
Come crea davvero lo stagger il CSS?
Ogni elemento della griglia parte spostato in basso e invisibile grazie a uno stato iniziale, e porta con sé due transizioni CSS (una per il move transform, una per l'opacity). L'interazione scroll-into-view di Webflow riporta soltanto ogni elemento alla sua posizione a riposo, con durata zero. Lo stagger nasce interamente da un `transition-delay` diverso per colonna: gli elementi della prima colonna si animano subito, la seconda un po' dopo, e così via — così la riga sembra scorrere a cascata.
Come adatto il codice quando la mia griglia ha un numero di colonne diverso?
Per ogni breakpoint ti serve un "building block" per colonna. Nel selettore `:nth-child()`, imposta il coefficiente prima di `n` sul numero di colonne a quel breakpoint, e imposta il numero dopo il segno meno sull'indice della colonna — che va dal numero-di-colonne-meno-uno (per la prima colonna) fino a 0 (per l'ultima). Poi dai a ogni colonna il suo `transition-delay`. Aggiungi un breakpoint più largo con cinque colonne? Copia una media query, porta il coefficiente a cinque e aggiungi un quinto building block.
Posso far girare questo stagger su più di una griglia nella stessa pagina?
Sì. Dai agli elementi della seconda griglia un valore diverso per l'attributo — `fc-css-staggered="item-2"` — poi duplica il CSS e sostituisci `item` con `item-2` nei selettori. Poiché ogni griglia è puntata dal suo valore d'attributo, i loro stagger restano del tutto indipendenti, anche se le due griglie hanno un numero di colonne diverso allo stesso breakpoint.
Questa tecnica funziona con le collection list del CMS?
Sì — ed è uno dei suoi grandi vantaggi rispetto all'approccio nativo. Dato che lo stagger è guidato da un attributo su ogni elemento e dal `:nth-child()` del CSS, non gli importa se gli elementi sono statici o vengono dal CMS. Aggiungi l'attributo `fc-css-staggered` alla collection item, tieni le due transizioni e l'interazione scroll-into-view, e incolla il CSS tarato sul numero di colonne.

← Torna al corso