EN IT
Home Chi sono Learn Blog

Animazione staggered allo scroll responsive in Webflow

Avanzato 28:12 webflowgsapscrollcssresponsive

Costruisci un'animazione staggered allo scroll responsive in Webflow: le card entrano in dissolvenza riga per riga, con lo stagger che si adatta al numero di colonne a ogni breakpoint.

Guarda su YouTube

Punti chiave

  • Lo stagger nativo di GSAP non fa "per riga allo scroll": punta al trigger e non ci sono fratelli da stagg­erare; punta all'intero gruppo dell'attributo e stagg­era tutte le card in una volta, anche quelle fuori schermo.
  • La soluzione: GSAP aggiunge solo una classe in-view quando ogni card entra nel viewport; le transizioni CSS animano il cambio di stato, e un transition-delay per card crea lo stagger.
  • Calcola il delay di ogni card dalla sua posizione nella riga con la funzione CSS sibling-index() e una variabile Webflow per il numero di colonne, così lo stagger si resetta a ogni riga.
  • Salva il numero di colonne in una variabile con un mode per breakpoint, e lo stesso stagger resta corretto quando la griglia si riflow (3 / 3 / 2 / 1 colonne).
  • Tieni le card modificabili nel Designer con una regola di override (visibili quando la classe JS è assente), dato che lo stato iniziale le nasconde.
  • L'intero effetto è minimo — una set action, una classe utility, un po' di CSS e una variabile — e funziona anche con elementi statici.

Capitoli del video

  1. 00:00 Intro
  2. 01:05 Spiegare la struttura della sezione
  3. 07:45 Le fondamenta dell'interazione allo scroll
  4. 16:04 Implementare l'interazione: stati iniziale e finale
  5. 21:05 Implementare l'interazione: responsività e transition delay
  6. 27:03 Outro

Questa lezione conclusiva affronta un problema che non è ovvio finché non ci sbatti contro: stagg­erare le card riga per riga mentre entrano allo scroll, mantenendo lo stagger corretto quando la griglia si riflow tra i breakpoint. È un finale azzeccato per il corso, perché si appoggia a quasi tutto ciò che abbiamo costruito — un trigger di scroll, il pattern “GSAP fa il toggle di una classe, il CSS anima”, variabili e variable modes di Webflow — più una funzione CSS moderna che tiene insieme il tutto.

La parte elegante è quanto poco codice serva: una set action, una classe utility, un po’ di CSS e una sola variabile.

Come funziona

Perché lo stagger di GSAP non va bene. Ti aspetteresti una action animate con move-Y, opacity e stagger attivo. Ma non c’è un buon target. Punta la action sul trigger element e ogni card anima isolata — un singolo elemento non ha fratelli con cui stagg­erare. Puntala sull’attributo condiviso data-animate-item e, la prima volta che parte, GSAP stagg­era l’intera collezione in una volta, incluse le card molto sotto la piega. Nessuno produce uno stagger per riga legato a ciò che entra davvero nel viewport.

La strategia: classe + delay CSS. Quindi GSAP fa il minimo — una action set che aggiunge una classe in-view a ogni card mentre scorre dentro (interazione scroll, trigger actions, enter → play, soglia quando il top dell’item tocca ~90% dell’altezza del viewport). L’animazione vive nel CSS: lo stato iniziale della card è opacity: 0 e translateY(20%); la classe in-view è lo stato finale (opacity: 1, translateY(0)) più due transizioni (transform + opacity, 800ms, expo). Lo stagger è poi solo un transition-delay per card.

Delay responsive via sibling-index() + una variabile. Il delay deve dipendere dalla posizione di una card nella sua riga, e le righe cambiano dimensione tra i breakpoint. Salva il numero di colonne in una variabile Webflow (number-of-columns) con un variable mode per breakpoint (3 desktop / 3 tablet / 2 landscape / 1 portrait). In CSS custom, usa la moderna funzione sibling-index() insieme a quella variabile per calcolare l’indice di ogni card nella riga, poi convertilo in un transition-delay. Dato che la formula legge la variabile, la stessa regola ricalcola i delay corretti ogni volta che la griglia si riflow — pienamente responsive, senza ricostruire. Il CSS espone alcune manopole comode: animation-mode (0 = lineare, 1 = esponenziale, in mezzo = un mix), uno step/max-delay e un expo-base per la curva; la sezione “matematica” sotto può restare intatta.

Restare modificabili nel Designer. Dato che lo stato iniziale nasconde le card, sparirebbero mentre costruisci. Una regola di override le mostra ogni volta che la classe JS runtime di Webflow non è sull’elemento html — condizione vera solo dentro il Designer — così l’editing resta normale e l’animazione live non è toccata. (Come sempre, tieni la classe in-view registrata in uno style guide così Webflow non la elimina.)

Come si usa

  1. Layout + trigger. Una griglia CMS (o statica) dove ogni item ha data-animate-item. Sull’item card imposta lo stato iniziale: opacity: 0, translateY(20%).

  2. Interazione scroll. Target data-animate-item, trigger actions, enter → play, soglia di start ~90% dell’altezza del viewport. Una action set che aggiunge la classe in-view al trigger element.

  3. Lo stato in-view. Definisci una classe in-view con opacity: 1, tutti i move transform a 0 e transizioni su transform + opacity (800ms, ease-out-expo). Registrala nello style guide.

  4. Variabile colonne responsive. Crea una variabile numerica number-of-columns e un variable mode per breakpoint con i valori giusti (es. 3/3/2/1).

  5. Il motore dello stagger (CSS). Aggiungi un embed con il CSS che colpisce [data-animate-item].in-view, calcola l’indice di riga di ogni card da sibling-index() e number-of-columns, e imposta da esso un transition-delay. Regola animation-mode, lo step/max-delay e expo-base a piacere. Aggiungi l’override di visibilità per il Designer. Pubblica e prova tra i breakpoint.

Il CSS dello stagger (la formula del delay e il suo blocco di config) si incolla dal cloneable — lì è pieno di commenti. Copialo e regola i valori di config invece di ricostruire la matematica.

Risorse

Domande frequenti

Perché non posso usare lo stagger di GSAP per un'animazione scroll-in che stagg­era ogni riga?
Perché nessun target funziona. Imposta il target della action sul trigger element e ogni card anima da sola — nessun fratello da stagg­erare. Punta all'attributo condiviso e GSAP stagg­era l'intera collezione la prima volta che parte, incluse le card non ancora entrate nel viewport. Nessuno dà uno stagger pulito per riga.
Come stagg­ero allora le card riga per riga allo scroll in Webflow?
GSAP aggiunge solo una classe in-view a ogni card quando entra nel viewport (una semplice set action). L'animazione in sé è una transizione CSS tra uno stato iniziale (opacity 0, spostata in basso) e lo stato in-view, e un transition-delay per card produce il timing staggered.
Come rendo il delay dello stagger responsive al numero di colonne?
Salva il numero di colonne in una variabile Webflow e aggiungi un variable mode per ogni breakpoint (es. 3/3/2/1). In CSS custom, calcola l'indice di ogni card nella sua riga usando la funzione sibling-index() e quella variabile, poi trasforma l'indice in un transition-delay. Dato che il delay legge la variabile, si ricalcola correttamente ogni volta che la griglia si riflow.
Come tengo visibili le card mentre lavoro nel Designer di Webflow?
Lo stato iniziale (opacity 0) le nasconde anche nel Designer. Aggiungi un override CSS che forza gli item con l'attributo di animazione di nuovo visibili quando la classe JS di Webflow non è presente sull'elemento html — condizione vera solo dentro il Designer, così l'animazione live non è toccata.

← Torna al corso