EN IT
Home Chi sono Learn Blog

Hover intelligenti e state machine in Webflow

Avanzato 28:46 webflowgsapinterazionihoverstate-machine

Costruisci animazioni hover su una sola timeline GSAP con play e reverse, poi una state machine che cambia colore con jump to — tutto in Webflow, senza interazioni duplicate.

Guarda su YouTube

Punti chiave

  • Play più reverse su una sola timeline gestiscono hover-in e hover-out da un'unica animazione: play continua in avanti da dove sta il playhead, reverse la riproduce all'indietro dallo stesso punto.
  • Dato che entrambi partono dalla posizione corrente, un hover interrotto inverte a metà corsa invece di scattare indietro — il movimento resta sempre continuo.
  • Il segreto delle animazioni complesse è spezzarle in action semplici e indipendenti — scale, colore, freccia-fuori, freccia-dentro — ciascuna cronometrata per convergere.
  • Per un effetto di rientro, usa una action "from to" e inverti il segno dell'offset così l'elemento rientra dal lato opposto invece di ripercorrere la sua uscita.
  • Jump to più pause trasforma una timeline in una state machine: ogni stato è una action a durata zero in un tempo fisso, un click teletrasporta il playhead lì, un evento catch-all lo congela, e una transizione CSS — non la timeline — fa la parte fluida.

Capitoli del video

  1. 00:00 Intro
  2. 01:25 Esempio #1: interazione hover su una sola timeline con play e reverse
  3. 11:13 Esempio #2: cambiare lo sfondo di una sezione con una state machine
  4. 26:19 Outro e cosa arriva dopo

Le interazioni GSAP di Webflow ti permettono due cose che prima erano davvero scomode: eseguire un intero effetto hover-in/hover-out da una sola timeline, e costruire una piccola state machine che cambia il colore di sfondo di una sezione con nient’altro che gli event settings. Questa lezione riprende gli event settings della precedente — aggiungendo jump to e delay — e li mette al lavoro su due interazioni reali.

La prima è l’interazione più universale che ci sia: l’hover su un pulsante. La seconda sembra complessa ma si regge su un’idea pulita — una timeline in cui non riproduci attraverso gli stati, ma salti tra di essi. Entrambe mostrano quanto lontano vadano questi settaggi una volta combinati con intenzione.

Come funziona

Play e reverse su una sola timeline. Con le interazioni classiche un hover richiede due animazioni — una per l’hover-in, una per l’hover-out — il che raddoppia la superficie per i bug. Con GSAP costruisci una sola animazione e usi control: play sul mouse-enter e reverse sul mouse-leave. La cosa importante è che entrambi agiscono dalla posizione corrente del playhead. Se qualcuno esce prima che l’animazione in avanti finisca, si ferma lì e inverte proprio da quel frame; rientra e continua di nuovo in avanti. Il movimento è sempre continuo, mai uno scatto.

L’animazione in sé è una lezione di scomposizione. Un hover che sembra sofisticato — scale con rimbalzo elastico, sfondo che si scurisce, una freccia che scivola su-e-fuori dal suo cerchio e poi rientra da sotto — in realtà è solo quattro action semplici cronometrate per convergere. L’unica sottile è il ritorno della freccia: usa una action from to in cui i valori “from” sono l’offset di uscita con i segni invertiti (esce a x:20, y:-20, rientra da x:-20, y:20). Quell’inversione è ciò che la fa tornare dal lato opposto invece di ripercorrere il suo tragitto. L’overflow: hidden del cerchio nasconde la freccia mentre è fuori.

Jump to + pause = una state machine. Il secondo esempio cambia lo sfondo della sezione home-about in base al badge che clicchi. Invece di un’animazione per pulsante, tratta la timeline come un insieme di stati discreti: tre action a durata zero, ciascuna imposta lo sfondo su un colore, posizionate a 0s, 1s e 2s. Ogni badge porta un attributo (element-change-color-role) con il suo valore, e ognuno dei tre eventi click usa jump to (0s / 1s / 2s) con control play per teletrasportare il playhead sul suo stato. Un quarto evento click catch-all colpisce tutti i badge (quell’attributo condiviso) con control pause, congelando la timeline sullo stato appena scelto. La dissolvenza fluida tra i colori non è affatto la timeline — è una transizione CSS background-color di 800ms sulla sezione.

Due dettagli la rendono solida. Control play (non il default “play from beginning”) sui tre eventi evita che la timeline riparta da 0 rompendo la logica a stati. E il pause catch-all porta un minuscolo delay di 0.01s — solo per coprire il caso limite in cui il tuo primissimo click è lo stato a 0s e il playhead è già lì; il micro-delay lascia girare la action dello stato per un frame prima che il pause la congeli.

È volutamente un po’ over-engineered — un esercizio didattico su cosa possono fare gli event settings. In un progetto vero, un’interazione per pulsante (che anima lo sfondo dal colore corrente a quello target) è più semplice; usa la state machine quando l’eleganza di una sola interazione vale la pena.

Come si usa

  1. Hover su una sola timeline. Costruisci una interazione sul pulsante con due eventi hover: mouse-enter → control play, mouse-leave → control reverse. Aggiungi l’animazione come action separate (es. scale 1 → 1.05 elastico; sfondo verso una tonalità più scura; freccia move x/y fuori; freccia from to di rientro con valori “from” a segno invertito). Tieni il wrapper della freccia su overflow: hidden.

  2. State machine per il colore. Sulla sezione imposta una transizione CSS: background-color 800ms ease-out-expo. Dai a ogni badge lo stesso nome di attributo con un valore distinto (purple / blue / orange). Aggiungi tre action a durata zero sulla timeline a 0s / 1s / 2s, ciascuna imposta lo sfondo su un colore.

  3. Collega gli eventi. Aggiungi un evento click per badge con control play e jump to che corrisponde al tempo della sua action (0s / 1s / 2s). Poi aggiungi un quarto evento click sull’attributo condiviso (tutti i badge) con control pause e un delay di 0.01s. Pubblica e clicca tra i badge — ogni click teletrasporta su uno stato e la transizione CSS ammorbidisce il cambio.

Risorse

Domande frequenti

Come faccio partire un'animazione hover in avanti all'hover e all'indietro all'hover-out in Webflow?
Usa una sola interazione con due eventi hover sulla stessa timeline: imposta il control dell'evento mouse-enter su play e quello mouse-leave su reverse. Play riprende in avanti dalla posizione corrente del playhead e reverse la riproduce all'indietro da lì, così non ti serve una seconda animazione.
Perché la mia animazione hover invertita scatta invece di scorrere fluida?
Succede quando il reverse riparte dalla fine invece che dalla posizione corrente. Control impostato su reverse continua da dove si trova il playhead, così un hover interrotto inverte proprio da quel frame.
Come animo un elemento fuori e poi di nuovo dentro dal lato opposto?
Spezzalo in due action. Portalo fuori con una action normale, poi riportalo dentro con una action "from to" i cui valori "from" sono l'offset con i segni invertiti — così invece di ripercorrere l'uscita, l'elemento rientra dal lato opposto.
Posso costruire una state machine con le interazioni Webflow?
Sì. Metti una action a durata zero per ogni stato in un tempo fisso sulla timeline, dai a ogni trigger un valore jump-to che corrisponde alla posizione del suo stato con control su play, poi aggiungi un evento catch-all con control su pause così il playhead si congela sullo stato scelto.

← Torna al corso