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.
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.
Il percorso del corso
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.