Controlla le interazioni GSAP in Webflow (Speed & Jump To)

Gli event settings GSAP di Webflow — control, delay, jump to e speed — sono il punto in cui le interazioni smettono di essere animazioni isolate e iniziano a comportarsi come un sistema che dirigi tu. Una volta capito cosa fa ciascuno, puoi mettere in pausa un loop di sfondo mentre l’utente punta alla tua call to action, congelare un effetto nell’istante in cui ha esaurito il suo scopo, o aprire e chiudere un popup con una sola interazione.

Questi quattro settaggi compaiono in quasi tutti i tipi di trigger, e sono più potenti di quanto sembrino. Invece di leggere definizioni, attraversiamo tre scenari reali che rendono chiare le differenze — soprattutto quella sottile ma decisiva tra mettere in pausa e fermare un’animazione.

Come funziona

La prima cosa da capire è un limite e la sua via d’uscita. Un’interazione page-load nativa non accetta altri eventi — non c’è il pulsante “aggiungi un altro evento”. Quindi, se vuoi un’animazione al caricamento che risponda anche a hover o click, costruisci l’interazione su un evento custom. Questo sblocca il pulsante più, lasciandoti mescolare eventi page-load, hover e click dentro un’unica interazione. Webflow genera un piccolo snippet per l’evento custom: lo incolli in una funzione JavaScript al caricamento (in Before </body> tag) così è il tuo codice a far partire l’interazione, mentre tutto il resto resta nel pannello interazioni.

Ora i settaggi. Control decide cosa fa un evento alla timeline: play e pause/resume spostano o trattengono il playhead, stop ferma l’animazione e la riporta all’inizio, e no action di proposito non tocca la posizione della timeline. Speed è cosa a parte — cambia la velocità della timeline senza riposizionarla, quindi uno speed di 0 congela l’animazione sul posto e 1 la fa girare normalmente. Jump to riposiziona il playhead in un punto preciso.

L’intuizione chiave è quando usare speed e no-action al posto di pause/resume. Pause/resume è perfetto quando vuoi solo trattenere e continuare — come un loop di sfondo che si ferma mentre l’utente passa sopra la CTA principale e riprende all’hover-out. Ma immagina un’animazione che deve fermarsi definitivamente dopo un click su un pulsante. Se hover-in/hover-out usano pause/resume, l’hover-out dopo il click farebbe ripartire l’animazione da capo — proprio ciò che non vuoi. La soluzione: imposta gli eventi hover su no action e usa speed (0 per congelare, 1 per riprendere) per l’effetto pausa, poi uno stop sul click. Dato che gli eventi no-action non toccano mai la timeline, non hanno il potere di far ripartire un’animazione che il click ha già fermato.

L’ultima idea è pura eleganza: toggle play/reverse. Assegna sia al pulsante di apertura sia a quello di chiusura di un popup un evento click su una sola interazione, imposta control su toggle play/reverse, e il primo click riproduce l’animazione in avanti (apre) mentre il successivo la riproduce all’indietro (chiude). Una interazione, una animazione — niente duplica-e-inverti come nel metodo classico.

Come si usa

1. Esempio 1 — pausa un loop di sfondo vicino alla CTA. Costruisci un’animazione di sfondo infinita (due cerchi sfocati che orbitano tramite offset di transform-origin e una rotazione di 360° sull’asse Z, repeat: infinite). Crea l’interazione da un evento custom così puoi aggiungere anche eventi hover. Dai ai pulsanti chiave un attributo condiviso tipo element-role="important-cta", poi aggiungi un evento mouse-enter con control pause e un evento mouse-leave con control resume, entrambi su quell’attributo. Incolla lo snippet dell’evento custom di Webflow in una funzione al caricamento così il loop parte al load.

2. Esempio 2 — congela, poi ferma al click. Per un banner che pulsa (repeat: infinite, back and forth), fallo partire con un first mouse-enter sulla sezione. Sul pulsante aggiungi eventi mouse-enter e mouse-leave con control no action — imposta lo speed a 0 sull’enter e lo speed a 1 sul leave. Infine aggiungi un first click sul pulsante con control stop e jump to 0, così il pulse finisce per sempre e non riparte all’hover-out.

3. Esempio 3 — una interazione apre e chiude un popup. Dai al pulsante di apertura element-role="open-popup" e a quello di chiusura element-role="close-popup". Costruisci una singola action che mostra il wrapper del popup (display: flex, opacity 0 → 100%). Aggiungi due eventi click — uno per ruolo — e imposta control su toggle play/reverse su entrambi. Il click su apri va avanti; il click su chiudi va all’indietro.

Il trigger a evento custom dell’Esempio 1 usa un piccolo snippet JavaScript (lo genera Webflow e il cloneable lo include). Prendilo dal cloneable invece di riscriverlo a mano.