EN IT
Home Chi sono Learn Blog
Intermedio

GSAP in Webflow: la guida completa

Una serie da zero sulle interazioni GSAP in Webflow — dai trigger, alle azioni e alla timeline orizzontale, fino a popup accessibili, effetti allo scroll e animazioni guidate dal CMS.

15 lezioni

L’integrazione GSAP di Webflow ha cambiato il modo di costruire il movimento — una timeline orizzontale, split text nativo, stagger veri e un controllo fine che prima richiedeva codice. Questa serie ti porta dal vocabolario di base fino a sistemi pronti per la produzione.

Si parte dal modello mentale — trigger, target, azioni — e poi si costruiscono cose reali: caricamenti di pagina senza flicker, hover intelligenti a stati, un popup accessibile, video ancorato allo scroll, marquee infinite e animazioni guidate dal CMS. Ogni lezione è pratica, prima di tutto no-code, e viene con un cloneable per smontarla con le tue mani.

In questo corso

  1. Padroneggia le interazioni GSAP in Webflow per animazioni fluide Ti aiuto a padroneggiare le interazioni GSAP in Webflow spiegando trigger, action e timeline, così puoi costruire animazioni di page-load fluide e senza intoppi.
  2. Elimina il flicker al page-load GSAP in Webflow Elimina il flash of unstyled content prima di un'animazione GSAP al caricamento in Webflow con un pattern riutilizzabile CSS + attributo, sicuro anche senza JavaScript.
  3. Controlla le interazioni GSAP in Webflow (Speed & Jump To) Usa gli event settings GSAP in Webflow — control, speed e jump to — per mettere in pausa, riprendere, congelare e alternare animazioni da trigger diversi, senza duplicare la timeline.
  4. Hover intelligenti e state machine in Webflow 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.
  5. Repeat, Runs On e Conditional Playback in Webflow Padroneggia gli interaction settings GSAP in Webflow — repeat di interazione vs action, runs on e conditional playback — per loop performanti che rispettano il reduced motion.
  6. Micro-interazioni hover intelligenti in Webflow (GSAP + CSS) 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.
  7. Toggle light/dark persistente in Webflow (GSAP) Costruisci un toggle light/dark persistente in Webflow con variable modes, un class toggle GSAP, transizioni di colore fluide e localStorage che sopravvive ai reload.
  8. Popup GSAP accessibile in Webflow (con scroll lock) Costruisci un popup modale accessibile in Webflow con GSAP — ruoli ARIA corretti, una timeline apri/chiudi reversibile, chiusura al click esterno e scroll lock mobile-safe.
  9. Ancora un video allo scroll in Webflow (Picture-in-Picture) Costruisci un video picture-in-picture che si ancora nell'angolo allo scroll in Webflow, con scroll trigger GSAP, sticky positioning e una singola variabile animata.
  10. Un sistema di marquee infinite riutilizzabile in Webflow Costruisci una marquee a loop infinito in Webflow con GSAP che va in qualsiasi direzione ed è riutilizzabile su tutto il sito con un singolo attributo — senza ricostruzioni.
  11. Sidebar CMS accessibile in Webflow (scroll lock + focus trap) Costruisci una sidebar guidata dal CMS in Webflow con GSAP — contenuto per card, slide-in, scroll lock, chiusura al click esterno e un vero focus trap per la tastiera.
  12. Animazione grow & scatter da CMS in Webflow Costruisci una gallery grow-and-scatter da CMS in Webflow: le immagini partono dal centro a stagger e poi si dispongono in una griglia responsive, con una variabile, CSS e GSAP.
  13. Bordo che cresce in hover in Webflow (CSS + GSAP) Costruisci un bordo circolare che cresce in hover in Webflow con un conic-gradient e una @property animabile; GSAP fa solo il toggle di una classe mentre il CSS anima.
  14. Galleria cubo 3D da CMS allo scroll in Webflow Costruisci una galleria cubo 3D guidata dallo scroll in Webflow dai dati CMS — immagini in dissolvenza, split text e un cubo che ruota nello spazio con transform 3D e GSAP.
  15. Animazione staggered allo scroll responsive in Webflow Costruisci un'animazione staggered allo scroll responsive in Webflow: le card entrano in dissolvenza riga per riga, con lo stagger che si adatta al numero di colonne a ogni breakpoint.