Padroneggia le interazioni GSAP in Webflow per animazioni fluide

Alla fine di questa lezione sarai in grado di costruire un reveal dell’hero fluido e a più livelli con le interazioni GSAP in Webflow. Non si tratta solo di far muovere le cose — colleghiamo quello che succede quando qualcuno arriva sulla pagina a come l’intero layout si compone per accoglierlo. Fatto bene, quel primo momento di movimento cambia del tutto la prima impressione che una persona si fa del tuo lavoro.

Il cambio grosso è la timeline orizzontale. Basta scorrere una pila verticale ingombra di action e stati iniziali separati: vedi e organizzi l’intera sequenza in un colpo d’occhio. E non devi buttare via quello che già sai: le interazioni classiche e il nuovo motore GSAP vivono fianco a fianco, ognuno a fare ciò in cui è più forte.

Vediamo insieme i concetti di base senza gergo complicato e con un unico progetto pratico. Una volta che ti è chiaro il perché dietro trigger, target e action, hai tutto quello che ti serve per creare animazioni di layout che sembrano vive.

Come funziona

Un’interazione è semplicemente un ponte tra quello che fa l’utente e come risponde la pagina. Nel sistema classico costruivi quelle catene dentro una timeline verticale — e una singola sequenza logica spesso andava spezzata su più interazioni separate solo per restare gestibile. Il nuovo sistema GSAP cambia le carte con una timeline orizzontale visiva, dove gestisci, duplichi e organizzi ogni action in sequenza in un’unica sequenza unificata.

E smetti di preoccuparti dello stato iniziale separato. Le action di GSAP lo assorbono con la proprietà type: imposti un’action su to (anima dallo stato del designer a uno nuovo), from (parte da un offset e torna allo stato del designer) oppure from to (definisci entrambi gli estremi in una volta). Effetti come uno scambio di testo in stagger diventano molto più puliti da costruire.

Il motore ha ancora delle lacune, però — al momento non anima variabili CSS personalizzate, blur o border-radius in modo diretto. Il workaround è ibrido: definisci delle classi helper nel tuo style guide che contengono quelle proprietà, dai loro delle normali transizioni CSS, e usi le action GSAP per aggiungerle o rimuoverle. Ottieni un risultato fluido e ben transizionato senza che GSAP tocchi direttamente la proprietà.

Infine, c’è un classico conflitto di timing da risolvere: un reveal di page-load e un effetto mouse-move che cercano di controllare gli stessi elementi nello stesso momento. Se sono attivi entrambi dall’inizio, il cursore del visitatore rovina l’animazione di entrata. Il modello mentale che lo risolve è un elemento “guardiano” — un wrapper nascosto che è l’unico listener del trigger mouse-move, portato da display: none a block dalla timeline di page-load solo alla fine dell’intro. L’effetto del cursore aspetta semplicemente il suo turno.

Come si usa

1. Imposta la struttura dell’hero.

   • Dai alla sezione hero height: 100vh e position: relative.
   • Al suo interno aggiungi un wrapper immagine con position: absolute, centrato con top: 50% e un translateY(-50%).
   • Dai al wrapper width: 20% e padding-top: 20% così resta un quadrato perfetto a ogni dimensione (il padding in percentuale si calcola sulla larghezza del parent, mantenendo il rapporto 1:1).
   • Metti dentro l’immagine hero, impostala a width: 100dvw e height: 100vh, e max-width: none così Webflow non sovrascrive la larghezza del viewport.

2. Centra l’immagine con del CSS custom. L’immagine è in absolute e deve restare centrata mentre il wrapper si espande, quindi imposta questi offset nel suo style panel. Così lasci libera la proprietà transform per l’animazione di scala.

   /* Sull'immagine, nello style panel di Webflow */
   top: calc(-1 * (50vh - 50%));
   left: calc(-1 * (50dvw - 50%));

3. Crea le classi helper. Nello style guide crea un div fittizio e aggiungi due classi di stato finale: cc-animate-image (imposta blur a 0px) e cc-animate-image-wrapper (imposta border-radius a 0px). Dai agli elementi di base delle transizioni CSS corrispondenti su filter e border-radius, così il cambiamento si anima in modo fluido quando GSAP fa il toggle della classe.

4. Costruisci la timeline GSAP di page-load. Crea una nuova interazione Page Load con GSAP:

   • Action 1 (immagine): type: to, scale: 1.02, e aggiungi cc-animate-image per togliere il blur.
   • Action 2 (wrapper): type: to, width/height a 100%, e aggiungi cc-animate-image-wrapper per squadrare gli angoli.
   • Action 3 e 4 (righe del titolo): attiva Split Text (per parola) con uno stagger “offset time” di 0.1s. La riga uno usa un from di 100% sull’asse Y così le parole salgono in vista; la riga due usa un to di -100% sull’asse Y per uscire di scena.

5. Collega il trigger mouse-move. Aggiungi un div dentro l’hero (display: none, position: absolute, a tutto schermo) che faccia da listener. Alla fine della timeline di page-load, aggiungi un’action che imposti il suo display a block. Poi crea un’interazione classica mouse-move su quel wrapper, animando le variabili image-left-margin e image-top-margin tra -1% e 1% per muovere l’immagine centrata al movimento del cursore.