EN IT
Home Chi sono Learn Blog

Micro-interazioni hover intelligenti in Webflow (GSAP + CSS)

Intermedio 34:40 webflowgsapcsshovermicro-interazioni

Progetta cinque micro-interazioni hover sui pulsanti in Webflow e impara quando usare GSAP, quando basta il CSS puro e come combinarli in modo pulito.

Guarda su YouTube

Punti chiave

  • Costruisci i pulsanti da un link block, non dall'elemento button nativo — ti lascia annidare un'icona, un div overlay e del testo da animare in modo indipendente.
  • Il trucco di reveal più pulito: metti l'elemento in movimento in un wrapper overflow:hidden e anima la width da 0 ad auto (o una transform), così resta mascherato finché non entra.
  • Spingi un overlay in entrata a -101% invece che -100%, così bordi e arrotondamenti sub-pixel non lasciano mai una sottile striscia visibile.
  • Non ogni hover ha bisogno di GSAP — un glow che cambia solo sfondo, colore e box-shadow del pulsante stesso è CSS puro tramite lo stato hover più le transizioni, più leggero e semplice.
  • Lo stato hover di Webflow stila solo l'elemento stesso, mai i suoi figli o fratelli — nel momento in cui devi animare un figlio (come ruotare un'icona), è il segnale per aggiungere un'interazione GSAP.

Capitoli del video

  1. 00:00 Intro
  2. 01:59 Esempio #1: pulsante che si espande con rimbalzo in hover
  3. 11:10 Esempio #2: riempimento del pulsante da sinistra
  4. 17:14 Esempio #3: riempimento circolare dal basso
  5. 22:21 Esempio #4: pulsante glowing (solo CSS)
  6. 28:19 Esempio #5: proiezione di luce e ombra (ibrido CSS–GSAP)
  7. 32:56 Outro

I bei pulsanti in hover non riguardano la complessità — riguardano la chiarezza, l’intenzione e la scelta dello strumento giusto al momento giusto. Questa lezione scompone cinque micro-interazioni hover, dal pulsante che si espande con rimbalzo a un effetto 3D di luce e ombra, e lungo la strada risponde alla domanda che conta davvero: quando serve GSAP, quando basta il CSS e come lavorano insieme?

C’è un pattern strutturale dietro tutte, e una mentalità dietro la scelta dello strumento. Afferra entrambi e costruirai effetti hover curati senza esagerare con l’ingegnerizzazione.

Come funziona

La struttura. Ogni pulsante qui è un link block, non l’elemento button nativo di Webflow — perché un link block può annidare figli (un’icona, un div overlay, un wrapper di testo), e questi effetti animano proprio quei figli. Alcune mosse riutilizzabili tornano di continuo: un wrapper overflow: hidden per mascherare un elemento in movimento; icone SVG con fill: currentColor così ereditano il colore del pulsante; e position: relative sul pulsante così un overlay in posizione assoluta può allinearsi a esso. Come sempre, le animazioni complesse si costruiscono spezzandole in action piccole e monoscopo.

I reveal. Il pulsante che si espande anima la width di un wrapper di testo da 0 ad auto dentro un genitore overflow-hidden, con easing elastico per il rimbalzo, guidato da toggle play/reverse su mouse-enter/leave. Il riempimento da sinistra fa scorrere un overlay a piena dimensione da translateX(-101%) a 0 mentre il colore del testo cambia per contrasto. Il riempimento dal basso fa lo stesso con un cerchio (aspect-ratio: 1, border-radius: 100%) che scorre da translateY(100%) a 0. Quel -101% invece di -100% è una protezione voluta: a esattamente -100% bordi o arrotondamenti sub-pixel possono lasciare una striscia visibile, quindi l’1% in più lo spinge del tutto fuori vista.

La scelta dello strumento — la vera lezione. Il quarto pulsante (glow) non usa nessuna interazione. Cambia solo il proprio sfondo, colore del testo e box-shadow in hover, quindi lo stato hover di Webflow più le transizioni CSS lo gestiscono per intero — niente GSAP, niente JavaScript generato. Il quinto pulsante (luce + ombra + freccia che ruota) è quello che svela tutto: la scala e la box-shadow del pulsante si fanno in CSS sullo stato hover, ma la freccia al suo interno no, perché lo stato hover di Webflow stila solo l’elemento stesso — non i suoi figli o fratelli. Ruotare quella freccia figlia richiede un’interazione GSAP. Quel confine è la regola pratica: CSS per le proprietà dell’elemento stesso, GSAP nel momento in cui devi raggiungere un figlio. Fai combaciare easing e durata su entrambi così l’effetto combinato sembra un solo movimento.

Il punto più ampio: usare GSAP di default non è gratis — ogni interazione aggiunge JavaScript che Webflow inietta nella pagina. Due o tre interazioni hover non affosseranno le tue performance, ma costruire con consapevolezza — CSS dove basta, GSAP dove serve — tiene il sito leggero e la tua intenzione chiara.

Come si usa

  1. Pulsante che si espande con rimbalzo. Link block con un’icona e un wrapper di testo overflow: hidden. Una action che anima la width del wrapper 0 → auto, easing elastic-out; due eventi hover con control toggle play/reverse.

  2. Riempimento da sinistra. Pulsante position: relative, overflow: hidden. Aggiungi un overlay a piena dimensione (position: absolute, offset pieni) a translateX(-101%). Action 1: X dell’overlay a 0%. Action 2: colore del testo verso un off-white per contrasto. Stessa durata, easing back-out.

  3. Riempimento dal basso. Un div con aspect-ratio: 1, border-radius: 100%, translateY(100%), centrato dall’allineamento flex del pulsante. Una action che lo porta a translateY(0).

  4. Glow (solo CSS). Aggiungi transizioni CSS su sfondo, colore e box-shadow, poi imposta i valori target sullo stato hover del pulsante nel pannello stile. Nessuna interazione necessaria.

  5. Luce + ombra (ibrido). Transizioni CSS su transform e box-shadow; sullo stato hover, scala e aggiungi box-shadow per la luce proiettata e l’ombra. Poi un’interazione GSAP con una action che ruota la freccia figlia (es. -45°), facendo combaciare easing/durata del CSS così tutto si legge come un solo effetto.

Risorse

Domande frequenti

Meglio un link block o l'elemento button nativo per i pulsanti animati in Webflow?
Usa un link block. A differenza dell'elemento button nativo può annidare altri elementi — un'icona, un div overlay per gli effetti, un wrapper di testo — che è esattamente ciò che queste animazioni hover manipolano. Il button nativo è troppo restrittivo per qualcosa a più livelli.
Come faccio comparire del testo dentro un pulsante in hover?
Metti il testo in un div con overflow: hidden, poi anima la width di quel wrapper da 0 ad auto (la sua dimensione naturale). Il taglio dell'overflow tiene il testo nascosto finché il pulsante non si espande, e un easing elastico gli dà un rimbalzo giocoso.
Perché animare un overlay a -101% invece di -100% in Webflow?
A esattamente -100% un bordo o l'arrotondamento sub-pixel può lasciare una sottile striscia dell'overlay a vista. Spingerlo a -101% garantisce che stia completamente fuori dal pulsante prima di entrare, senza glitch visivi.
Quando conviene usare il CSS invece di GSAP per un effetto hover in Webflow?
Se l'effetto cambia solo le proprietà dell'elemento su cui passi il mouse — sfondo, colore del testo, box-shadow — bastano lo stato hover di Webflow più le transizioni CSS, e non spedisce JavaScript extra. Usa GSAP quando devi animare un figlio o un fratello, che lo stato hover non può toccare.

← Torna al corso