Animazioni e integrazioni GSAP in Webflow
Effetti GSAP autonomi da inserire in qualsiasi progetto Webflow — reveal staggerati, card trascinabili, una sequenza di immagini allo scroll, un effetto di disintegrazione e set piece con filtri SVG.
8 lezioni
Se le interazioni native di Webflow sono il punto di partenza del movimento, GSAP è dove smette di metterti dei limiti. Questo corso è una raccolta di build GSAP autonome — ognuna un effetto vero che puoi prendere e portare dritto in un progetto: reveal di testo staggerati, card trascinabili, una sequenza di immagini in stile Apple allo scroll, un effetto di disintegrazione, un set piece con spotlight e prisma, e un bottone di vetro che piega la luce dietro di sé.
Non sono demo astratte. Ogni lezione arriva con un cloneable e ti spiega il ragionamento — perché GSAP invece del nativo, dove ScrollTrigger vale davvero, come tenere una timeline leggibile — così esci capace di piegare ogni effetto ai tuoi design, non solo di incollarlo e sperare.
In questo corso
- Animazioni Split-Text con Stagger in Webflow (GSAP) Fai comparire i titoli parola per parola o lettera per lettera in Webflow con il pannello GSAP nativo — stagger, origine From, Split Text, maschere ed easing.
- Animazioni staggered GSAP in Webflow senza codice Aggiungi animazioni staggered di slide e fade a gallery, liste CMS e griglie in Webflow con GSAP — senza codice, solo pochi attributi per timing, easing e ordine.
- Crea card trascinabili in Webflow con GSAP (No Code) Crea in Webflow uno stack di card trascinabili e lanciabili con GSAP — scagliale via, resetta il mazzo e collegale persino ai contenuti del CMS.
- Anima un poster in stile svizzero in Webflow con GSAP Ricrea un poster modernista in stile svizzero in Webflow con una maschera clip-path costruita in Figma e una sequenza GSAP al caricamento fatta di reveal di testo in stagger e slide-mask.
- Image sequence in scroll stile Apple (Webflow + GSAP) Ricrea l'animazione in scroll degli AirPods di Apple in Webflow: estrai i frame dal video, ospitali e guida la sequenza su un canvas con GSAP ScrollTrigger.
- Effetto disintegrazione con GSAP in Webflow Crea in Webflow un effetto disintegrazione allo scroll con pochi attributi GSAP — niente codice da modificare, funziona con i contenuti CMS e resta accessibile.
- Effetto Spotlight in Webflow con Filtro Prisma GSAP Crea uno spotlight che segue il cursore in Webflow con un overlay a gradiente radiale, poi aggiungi un filtro prisma SVG animato con GSAP per un glow premium.
- Bottone di Vetro con Filtri SVG e GSAP in Webflow Crea in Webflow un bottone di cristallo che rifrange la pagina dietro di sé con un filtro SVG e, all'hover, passa da vetro morbido a ghiaccio nitido con GSAP.