Animazioni e layout creativi in Webflow
Un percorso pratico nel movimento creativo in Webflow — animazioni allo scroll, reveal di testo staggerati, interazioni 3D, gallerie trascinabili e uno slider 3D guidato dal CMS.
È qui che Webflow smette di sembrare un website builder e inizia a sembrare una tela bianca. Ogni lezione è un effetto vero, da portfolio — animazioni allo scroll, reveal di testo staggerati, card 3D, un poster animato in stile svizzero, una sequenza di immagini in stile Apple allo scroll — e ognuna arriva con un cloneable, così puoi smontarlo e farlo tuo.
Costruiamo dai risultati più immediati fino a quelli più ambiziosi: prima le animazioni while-scrolling native e un logo glitch senza codice, poi i reveal di testo e gli stagger, e infine gli effetti più elaborati che uniscono gli strumenti nativi di Webflow a GSAP. Zero gatekeeping — solo i modelli mentali e le mosse esatte, così puoi ricostruire ognuno di questi effetti da zero.
Il percorso del corso
-
Padroneggia le animazioni allo scroll in Webflow (no-code)
Crea quattro animazioni native allo scroll in Webflow — un logo, un modello 3D e del testo che si rimpiccioliscono e scivolano nella navbar, senza codice.
-
Effetto glitch sul logo in hover in Webflow (no-code)
Sovrapponi tre livelli del logo, tinta due con filtri CSS e aggiungi un'interazione hover nativa con movimenti a scatti — effetto glitch in Webflow, senza codice.
-
Text Reveal Animations Scalabili in Webflow (Custom Element)
Crea text reveal animations riutilizzabili in Webflow con il Custom Element: una sola action, stagger per lettera via CSS inline e supporto multi-riga incluso.
-
Animazioni Staggered Responsive in Webflow (Solo CSS)
Costruisci un reveal staggered slide-and-fade responsive in Webflow senza JavaScript, usando un attributo, la proprietà CSS transition-delay e media query con nth-child.
-
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.
-
Crea un'animazione 3D delle card allo scroll in Webflow
Crea un'animazione while-scrolling 3D delle card in Webflow senza codice, usando position sticky, la perspective sui figli e la timeline delle interazioni per dare profondità vera.
-
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.
-
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.
-
Grid gallery dinamica in Webflow (senza codice)
Costruisci una grid gallery guidata dal CMS in Webflow dove ogni immagine mantiene il suo vero rapporto d'aspetto, senza ritagli — imposta le colonne per breakpoint con qualche attributo.
-
Slider 3D con CMS in Webflow (nativo + Finsweet)
Costruisci uno slider 3D premium in Webflow con lo Slider nativo, un riflesso CSS, un'interazione Slider Change, poi rendilo dinamico dal CMS con Finsweet.
-
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.
-
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.
-
Sfondo a gradiente fluido interattivo in Webflow
Aggiungi uno sfondo a gradiente fluido in Webflow con un attributo custom — niente codice — e regola colori, velocità e reattività al mouse in tempo reale.
-
Marquee infinito e trascinabile in Webflow (no code)
Crea un marquee infinito e trascinabile in Webflow senza codice — solo attributi per direzione, velocità per breakpoint, pausa fluida al passaggio del mouse, CMS e accessibilità.
-
Ripple d'acqua interattivi su qualsiasi sezione Webflow
Aggiungi un effetto ripple d'acqua no-code e configurabile a qualsiasi sezione o galleria CMS in Webflow — basato su jQuery + WebGL con un pannello GUI live per il tuning in tempo reale.
-
Effetto lente di vetro sui video in Webflow
Trasforma il cursore in una lente di vetro sopra un video hero in Webflow — un effetto di distorsione cromatica su GPU che configuri con pochi attributi custom.
-
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.
-
Layout Masonry Orizzontale in Webflow
Ricrea una galleria masonry orizzontale in Webflow, totalmente responsive e accessibile, usando solo Flexbox — senza codice — e poi collegala al CMS.
-
Effetto Glow che Segue il Cursore in Webflow
Crea un bagliore che segue il cursore su una griglia di card in Webflow con variabili, interazioni native e poche righe di CSS — niente JavaScript.
-
Navbar Liquid Glass di Apple in Webflow (No Code)
Ricrea la navbar liquid glass di Apple in Webflow con div sovrapposti e un piccolo filtro SVG — senza librerie esterne e senza codice pesante, solo elementi nativi.
-
Effetto Glow su Logo al Hover in Webflow (No Code)
Crea un effetto glow sul logo al passaggio del mouse in Webflow senza codice — con masking CSS, un blur backdrop-filter e trasformazioni move e scale a strati.
-
Effetto Neon Glow Parametrico in Webflow
Ricrea il neon glow retro di Webflow all'hover con un sistema parametrico basato su variabili CSS, color-mix() e variable modes intercambiabili — senza scegliere colori a mano.
-
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.
-
Bordi Interni alla Griglia in Webflow: Responsive e Accessibili
Crea bordi interni puliti tra gli elementi di una griglia in Webflow usando solo gap e background — responsive e accessibili, anche con il CMS.