Intermedio
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.
25 lezioni
È 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 i set piece più grandi 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.
In questo 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.