Animazioni staggered GSAP in Webflow senza codice

Aggiungi un’animazione staggered di slide e fade fluida a qualsiasi gallery, lista CMS o griglia in Webflow — con GSAP, e configurata interamente con una manciata di attributi custom. Nessuno script da toccare, nemmeno una riga di codice da scrivere: costruisci il layout, etichetti il wrapper, e l’animazione è lì.

La parte bella è quanto poco devi fare davvero. Occhio ai valori di default, perché potresti già essere a posto con un solo attributo — gli altri sono opzioni a cui ricorri solo quando vuoi un controllo più fine su timing, easing o ordine con cui gli elementi si animano. E una volta impostato, funziona e basta: più liste nella stessa pagina, elementi dal CMS, griglie personalizzate — stesso attributo, stesso risultato.

Come funziona

Il tutto è guidato dagli attributi. Uno script (incluso nel cloneable) cerca gli elementi che hai marcato e chiede a GSAP di costruire uno slide-and-fade staggered per gli item al loro interno. Dato che la logica legge dagli attributi, non apri mai il codice — aggiungi gli attributi dal pannello impostazioni di Webflow e lasci fare allo script.

C’è davvero un solo attributo obbligatorio: il marker con valore list, aggiunto al div block che avvolge tutti gli elementi, o direttamente su una Collection List. Quello da solo ti dà l’animazione staggered di default. Ogni altro attributo è opzionale e ha un valore predefinito sensato, quindi un primo giro può essere un singolo attributo e nient’altro.

Quando invece vuoi rifinirla, le opzioni si dividono in pochi gruppi. Timing: threshold controlla a quale percentuale di visibilità dell’elemento scatta l’animazione (default 0.4, cioè 40%), e duration imposta quanto dura l’animazione di un singolo elemento (default 0.5s). La spaziatura è quella da capire: each imposta un intervallo fisso in secondi tra la partenza di un elemento e l’altro, mentre amount imposta un tempo totale diviso tra tutti gli elementi di una riga — così con un amount di 0.5 su cinque elementi hai 0.1s tra ciascuno. Queste due sono in conflitto di proposito: se amount è impostato, each viene ignorato anche se ha un valore valido. Movimento: offsetY è l’offset verticale iniziale da cui ogni elemento scivola su (default 3rem), ease è l’easing applicato al singolo elemento (default power3.out), e lo stagger ease è un secondo easing che distribuisce gli istanti di partenza lungo la riga — una curva come power1.out parte con gap più ampi tra gli elementi per poi stringerli sempre di più verso la fine.

L’opzione più espressiva è from, che decide dove parte l’onda nella riga. start (il default) va da sinistra a destra; end parte da destra; edges fa partire per primi il primo e l’ultimo elemento e si muove verso il centro; random mescola l’ordine; e un indice a base zero (come 1) parte da un elemento specifico — quindi 1 inizia dal secondo elemento da sinistra. È un piccolo attributo che cambia completamente la resa.

Come si usa

1. Clona il progetto. Prendi il cloneable Webflow — include la struttura, lo stile e lo script che alimenta l’animazione. In fondo alla pagina clonata trovi un recap completo di ogni attributo (con i link alla documentazione easing di GSAP), quindi tienilo come riferimento.

2. Marca la lista. Aggiungi l’attributo obbligatorio con valore list al div block che avvolge tutti gli elementi, o a una Collection List. Pubblica e hai già uno slide-and-fade staggered funzionante sui default.

3. Regola il timing (opzionale). Usa threshold per cambiare quando scatta allo scroll, duration per quanto dura ogni elemento, e each (intervallo fisso tra gli elementi) oppure amount (tempo totale diviso sulla riga) per la spaziatura — ricorda, non impostarli entrambi, perché amount vince.

4. Definisci il movimento (opzionale). Regola offsetY per quanto scivola su ogni elemento, ease per come si muove il singolo elemento, e lo stagger ease per come si distribuiscono gli istanti di partenza lungo la riga. Vedi il riferimento easing di GSAP per i valori accettati.

5. Scegli l’ordine (opzionale). Imposta from su start, end, center, edges, random o un indice a base zero per controllare da quale elemento parte l’onda.

6. Riusalo liberamente. Metti lo stesso attributo su quante liste vuoi nella stessa pagina — senza indici per distinguerle — e usalo esattamente allo stesso modo su Collection List CMS e layout a griglia personalizzati.