ENIT
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. Ecco quel CSS — --_cards---number-of-columns è il nome generato da Webflow per la variabile number-of-columns, e il blocco di config in alto è l’unica parte che toccherai davvero:

<!-- Embed sulla pagina (o nell'head del sito) -->
<style>
  [data-animate-item].in-view {
    /* ==========================================
     STAGGERED ANIMATION CONFIGURATION
     ========================================== */

    /*
     --animation-mode: Switches between linear and exponential pacing.
     - Effect: Blends the linear progression with the exponential deceleration.
     - Range: 0 to 1.
       * 0   = Pure Linear (equal time gaps between every single card).
       * 1   = Pure Exponential (gaps decrease over time; index 0 is always 0s).
       * 0.5 = A smooth hybrid (soft dampening towards the end of the row).
  */
    --animation-mode: 1;

    /*
     --step-or-max-delay: Dual-purpose time multiplier.
     - Effect: Defines the overall pacing and speed of the stagger.
     - Range: 0.05s to 0.5s for Linear step; 0.2s to 1.5s for Expo max ceiling.
       * Linear mode: Acts as the fixed step between cards (e.g., 0.2s -> 0s, 0.2s, 0.4s...).
       * Expo mode:   Acts as the theoretical maximum delay ceiling for the last column.
  */
    --step-or-max-delay: 0.5s;

    /*
     --expo-base: Controls the deceleration curvature (only active when --animation-mode is > 0).
     - Effect: A lower value makes subsequent items animate much closer together (faster deceleration).
     - Range: 0.1 to 0.9. (Recommended: 0.3 to 0.6).
       * 0.1 = abrupt deceleration; the last items trigger almost instantly after the second.
       * 0.9 = very subtle deceleration; behaves almost like a straight linear progression.
  */
    --expo-base: 0.5;

    /* ==========================================
     MATHEMATICAL CALCULATION
     ========================================== */

    /* 0-based column index per row */
    --index: mod(sibling-index() - 1, var(--_cards---number-of-columns));

    /* 1. Linear pacing component */
    --linear-part: var(--index);

    /* 2. Exponential pacing component */
    --expo-part: calc(1 - pow(var(--expo-base), var(--index)));

    /* 3. The Interpolation Formula (Linear Interpolation / Lerp) */
    --final-curve: calc((var(--linear-part) * (1 - var(--animation-mode))) + (var(--expo-part) * var(--animation-mode)));

    /* Final computed transition delay */
    transition-delay: calc(var(--final-curve) * var(--step-or-max-delay));
  }
</style>

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 qui sopra è il blocco esatto del cloneable — regola le tre variabili di config in alto (--animation-mode, --step-or-max-delay, --expo-base) e lascia intatta la sezione matematica.

Risorse

Nella knowledge base

Pagine di riferimento derivate da questa lezione — lo stesso materiale riorganizzato per concetto, così cerchi una cosa sola senza riguardare il video. In inglese.

  • Scroll-driven animation — scrub versus trigger actions

    Every scroll animation is one of two kinds: a scrub, where the playhead is tied continuously to scroll position, or trigger actions, where crossing a threshold fires an animation that then plays on its own clock; choosing wrong is the most common cause of a scroll effect that feels off, and the scaffold for a scrub is always a tall section with a sticky full-viewport window inside it.

  • Stagger — spreading one animation across many targets

    Stagger spreads a single animation across multiple targets, so it does nothing at all with one target; offset time sets a fixed gap between each target's start while total time is one budget divided across the intervals, and the stagger's own ease shapes the distribution of delays — a different job from the action's ease.

  • Stagger a grid row by row as it scrolls into view

    GSAP's own stagger cannot do this, so invert the responsibility — a set action adds an in-view class to each card as it enters the viewport, CSS transitions do the animation, and a per-card transition-delay computed from sibling-index() and a column-count variable produces a stagger that resets on every row and re-derives itself at every breakpoint.

  • A style cleanup deletes the classes your interactions toggle

    A class that exists only to be added by a GSAP set action is applied to no element, so Webflow flags it as unused and any style cleanup deletes it — publishing itself does not strip it, which means this breaks work that was already correct, later, when someone tidies the project; keep an element wearing the class so it is genuinely used and never appears in a cleanup list.

  • It works in the Designer but not live — or the reverse

    Custom code, non-standard CSS properties, first-paint flicker, scroll lock and keyboard focus all behave differently in the Designer and in plain preview than on the published site, and the Designer additionally shows you your animations' initial states, so half-hidden content while building is expected rather than broken.

  • Verified identifiers

    Every exact attribute name, class name, variable name, SVG id and selector used across the GSAP-in-Webflow corpus, each traced to the cloneable it was copied from; copy these verbatim and never reconstruct one from memory, because a wrong identifier fails silently.

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 Vedi tutte le lezioni