Animazioni Split-Text con Stagger in Webflow (GSAP)

Puoi far comparire un titolo parola per parola, o lettera per lettera, tutto dentro Webflow — senza codice — usando il nuovo pannello di animazione basato su GSAP e le sue opzioni Stagger e Split Text. Questa lezione parla di animazioni con stagger applicate al testo: come spezzare un titolo, temporizzare ogni pezzo e far sembrare l’intero reveal intenzionale invece che casuale.

Il pannello è potente ma, onestamente, una delle cose più ostiche che Webflow abbia rilasciato. La maggior parte delle persone clicca tra Stagger e Split Text sperando che ne esca qualcosa di bello. Qui l’obiettivo è l’opposto — capire esattamente cosa fanno stagger, offset, split text ed easing dello stagger, così ogni ritardo è messo di proposito e niente è lasciato al caso.

Afferra il modello mentale e le impostazioni smettono di essere una lotteria. Sarai in grado di costruire reveal eleganti, temporizzati con precisione e facili da ritoccare quando un cliente chiede “un po’ più veloce alla fine”.

Come funziona

Il modello del pannello. Dal sistema basato su GSAP, il pannello interazioni è fatto di pochi pezzi annidati. Un trigger (come page load) contiene una o più action. Un’action è semplicemente un gruppo di trasformazioni di proprietà — un modo per spostare certi valori da un punto di partenza a uno di arrivo — applicato a uno o più target. Ogni proprietà animata ha un Type che decide come si calcolano i valori: To anima da qualunque valore l’elemento ha ora nel designer verso un valore finale; From-To ti fa impostare entrambi gli estremi in modo esplicito; From imposta solo un valore di partenza e anima fino al valore del designer. Per un reveal al caricamento pagina, From è quello giusto — definisci da dove partono le lettere (invisibili, spinte in basso) e loro atterrano sul loro stato reale e progettato.

Stagger — l’idea centrale. Stagger significa che l’animazione viene applicata a più target uno dopo l’altro invece che tutti insieme. Il tranello che frega tutti: con un singolo target non c’è nulla da scaglionare, quindi attivarlo non cambia niente. Prende vita solo quando hai diversi target — ed è proprio per questo che Split Text conta. Ci sono due modi per temporizzarlo. Offset time è un ritardo fisso tra l’inizio di ogni elemento: 0,5s significa che ogni pezzo parte mezzo secondo dopo il precedente, quindi aggiungere elementi allunga la sequenza. Total time è un budget fisso per l’intero stagger, diviso equamente tra gli intervalli — e il numero di intervalli è sempre il numero di pezzi meno uno. Quindi con 13 lettere e un total time di 0,5s, ogni divario è circa 0,5 ÷ 12 ≈ 0,04s, stretto e fluido. Stessa idea, direzione opposta: l’offset cresce col numero, il total time riduce ogni divario man mano che il numero cresce.

L’origine From, e Split Text con le maschere. Il From dello stagger (start, center, end, edges, random, element) decide da dove parte la sequenza — center anima prima il pezzo centrale e poi va verso l’esterno, edges fa partire prima i pezzi esterni e si muove verso il centro, e così via. Cambia solo l’ordine; la logica della spaziatura tra i pezzi resta identica. Split Text è ciò che dà allo stagger qualcosa su cui lavorare: spezza un elemento di testo in parole, righe o caratteri, e ognuno diventa un target. L’opzione mask avvolge ogni pezzo in un suo contenitore che lo ritaglia, così resta nascosto finché non entra in vista — abbinata a un movimento verso l’alto, ogni parola o lettera sembra scivolare fuori da un bordo nascosto, molto più pulito di una dissolvenza spoglia.

Due easing, due compiti. Ci sono due impostazioni di ease e non sono la stessa cosa, anche se condividono il nome. L’ease nel gruppo dell’action modella come ogni singolo pezzo viaggia dal valore iniziale a quello finale. L’ease dentro le impostazioni dello stagger modella la distribuzione dei ritardi tra i pezzi. Lascialo su none e i divari sono uniformi. Scegli una curva che finisce in in e i divari partono stretti poi si allargano — il reveal sembra rallentare. Scegline una che finisce in out e i divari partono larghi poi si stringono — sembra accelerare. Le curve esotiche (back, bounce, elastic) producono una spaziatura volutamente caotica e giocosa; divertenti da provare, raramente ciò che vuoi per un titolo pulito.

Come usarlo

1. Passa al sistema GSAP. Se il tuo pannello interazioni mostra ancora la vecchia interfaccia, apri il menu a tendina in fondo che dice classic interactions e scegli interactions with GSAP. A sinistra compare l’icona a fulmine del nuovo pannello.

2. Aggiungi un trigger page load. Usa il menu dei trigger a destra, scegli page load e poi Custom per costruire liberamente. Rinomina l’interazione con qualcosa di chiaro come home page load (il nome della pagina tra parentesi tiene tutto in ordine in un progetto).

3. Punta al titolo. Webflow aggiunge un target di default basato su classe, ma un H1 di solito non ha classe, quindi passa il target a un custom selector e scrivi H1. Con un SEO corretto c’è un solo H1 per pagina, quindi all matching elements va bene.

4. Imposta l’animazione. Sotto l’action, imposta una durata ed (eventualmente) un ritardo di start, e scegli un ease che ti piace — expo out rende bene. Tieni solo le proprietà che ti servono: opacity e move Y. Imposta il Type su From, togli la spunta a To, poi fai partire l’opacità da 0% e la Y da 100% così il testo sale mentre appare in dissolvenza.

5. Attiva Split Text. Accendi Split Text e scegli word o letter (line si comporta come word quando ogni parola è su una riga sua). Imposta mask in modo che corrisponda al tipo di split, così ogni pezzo viene ritagliato per un reveal pulito che scivola fuori.

6. Scegli lo stagger. Imposta Stagger su offset time per un divario fisso tra i pezzi, o su total time per far stare l’intero reveal dentro un’unica durata. Scegli un’origine From (start è il classico da sinistra a destra; prova center o edges per variare).

7. Modella il ritmo (opzionale). Aggiungi un ease dello stagger per sbilanciare i ritardi — in per decelerare il reveal, out per accelerarlo. Esagera il total time per un attimo mentre regoli, così vedi davvero cosa fa ogni curva, poi riportalo giù.

Tutto qui vive nelle impostazioni native di Webflow, quindi non c’è nulla da incollare — clona il progetto, apri l’interazione page load e cambia i valori per sentire come si comporta ognuno.