Come creo un effetto disintegrazione in Webflow senza codice?

Clona il componente basato su GSAP, attiva il plugin ScrollTrigger e aggiungi l'attributo fc-disintegration="component" all'elemento che vuoi far dissolvere. Lo script legge i tuoi attributi e gestisce tutto il lavoro sui canvas, così non tocchi mai il JavaScript.

L'effetto disintegrazione funziona con i contenuti CMS di Webflow?

Sì. Dato che lo script colpisce qualsiasi elemento con l'attributo component, puoi metterlo dentro una Collection Item e si comporta esattamente come la versione statica. Evita solo di farlo girare su tutti gli item insieme — è dispendioso in risorse.

Perché i frammenti escono fuori dalla sezione?

L'effetto genera veri elementi del DOM — i canvas — che occupano spazio, quindi se il genitore non li ritaglia debordano dal viewport. Imposta overflow: hidden sulla sezione circostante per tenere ogni frammento contenuto.

Un effetto disintegrazione allo scroll pesa sulle performance?

Può pesare, perché ogni istanza crea un gruppo di canvas ed elabora i pixel durante lo scroll. Tienilo su uno o tre visual chiave per pagina, usa immagini sotto i 900px circa di larghezza e abbassa il numero di frammenti se ti serve più leggero.

Effetto disintegrazione con GSAP in Webflow

11 maggio 2025 Intermedio 19:50 webflowgsapscrolltriggerdisintegrationcmsanimation

Crea in Webflow un effetto disintegrazione allo scroll con pochi attributi GSAP — niente codice da modificare, funziona con i contenuti CMS e resta accessibile.

Guarda su YouTube

Punti chiave

L''intero effetto è guidato dagli attributi — inserisci uno script e marchi un solo elemento, poi configuri tutto il resto dal pannello impostazioni di Webflow con attributi opzionali che ricadono su default sensati.
Il tuo componente deve avere una posizione non statica (relative, absolute, fixed o sticky), perché i frammenti canvas generati sono posizionati in assoluto rispetto all'antenato non statico più vicino — lascialo static e si ancorano al body, mandando tutto in frantumi.
Racchiudi l'effetto in un contenitore con overflow: hidden: i frammenti sono veri elementi del DOM che occupano spazio, quindi senza ritaglio escono dal viewport e creano problemi di layout.
L''accessibilità è preservata in automatico — quando lo script sostituisce l''immagine originale con la sua versione canvas cattura il testo alt e lo riassegna, così gli screen reader ricevono la stessa esperienza.
L''effetto è davvero pesante (molti canvas più manipolazione dei pixel per ogni componente), quindi riservalo a uno o tre visual chiave per pagina e dagli immagini ottimizzate sotto i 900px circa di larghezza.

Capitoli del video

Trasforma un”immagine in una nuvola di pixel che si sparpagliano mentre chi visita scorre la pagina — un effetto disintegrazione allo scroll che costruisci in Webflow con nient”altro che una manciata di attributi GSAP. Non c”è codice da modificare, funziona con i contenuti CMS e resta perfettamente accessibile.

La magia è che tutto il lavoro pesante — catturare lo snapshot dell”immagine, spezzarla in frammenti canvas, animare ognuno allo scroll — avviene dietro le quinte. Il tuo compito è marcare un elemento e, se vuoi, ritoccare qualche attributo opzionale. Ogni attributo ha un default sensato, così puoi pubblicare così com”è e mettere a punto dopo.

È un effetto da vetrina, quindi trattalo come tale. Sotto il cofano è davvero pesante, e dà il meglio su una singola immagine hero o pochi visual chiave — soprattutto quando lo sovrapponi alle interazioni allo scroll native di Webflow.

Come funziona

Il concetto è semplice, anche se lo script dietro non lo è. Marchi l”elemento che vuoi far disintegrare con fc-disintegration="component", e al caricamento lo script cattura uno snapshot di quell”immagine con la libreria html2canvas, ne estrae i dati dei pixel e la ricostruisce come un gruppo di frammenti canvas. Poi sparpaglia quei frammenti nell”elemento, dà a ciascuno un po” di rotazione casuale e uno scostamento direzionale, e li fa svanire allo scroll con GSAP ScrollTrigger. Non apri mai il codice — etichetti il pezzo e, se vuoi, regoli il feel dal pannello impostazioni di Webflow.

Due regole strutturali lo fanno comportare bene. Primo, il componente deve avere una posizione non statica — relative, absolute, fixed o sticky vanno tutte bene. Questo perché i canvas generati sono posizionati in assoluto, e il posizionamento assoluto si calcola sempre rispetto all”antenato non statico più vicino. Lascia il componente static e i frammenti si ancorano al body, mandando visivamente tutto in frantumi. Secondo, racchiudi l”effetto in un contenitore con overflow: hidden. I frammenti sono veri elementi del DOM che occupano spazio, quindi senza ritaglio possono uscire dal viewport e generare problemi di layout come una barra di scroll indesiderata.

L”accessibilità è gestita per te. Per aggirare i problemi cross-origin lo script rimuove temporaneamente l”immagine originale e la ricarica come blob base64 — ma prima di farlo cattura il testo alt originale e lo riassegna all”immagine che genera. Gli screen reader ricevono la stessa esperienza che avrebbero con l”immagine intatta.

Il compromesso è il costo. Ogni istanza crea una pila di canvas, percorre ogni pixel, li duplica e li sparpaglia, poi anima il tutto allo scroll. È tanto lavoro, quindi non è un effetto da spargere su un”intera griglia CMS — usalo sui visual che meritano il centro della scena, e appoggiati agli attributi opzionali solo quando vuoi un controllo più fine su rotazione, distanza, cascata o timing dello scroll.

Come si usa

Attiva ScrollTrigger. Nelle impostazioni del progetto Webflow, abilita il plugin GSAP ScrollTrigger e salva — è l”unico prerequisito su cui l”effetto si appoggia.
Clona il progetto. Prendi il progetto clonabile su Webflow. La documentazione completa — ogni attributo, il suo default, esempi rapidi e il link ai docs di GSAP — è in fondo alla pagina clonata.
Marca il tuo componente. Sull”elemento che vuoi far disintegrare, aggiungi fc-disintegration="component" e dagli una posizione non statica (relative funziona perfettamente). Al suo interno, metti l”immagine con width: 100% così scala in modo pulito.
Ritaglia l”overflow. Dai alla sezione circostante overflow: hidden così i frammenti sparpagliati non escono mai dal layout.
Configura il feel (opzionale). Vuoi frammenti che volano più lontano, ruotano di più, cascano in modo diverso, o che partono e finiscono a una posizione di scroll diversa? Aggiungi uno qualsiasi degli attributi fc-disintegration-* dalla tabella di configurazione qui sopra. Lasciali stare e ci pensano i default.
Pubblica e prova sul sito live. L”anteprima “preview custom code” del designer non renderizza l”effetto in modo affidabile, quindi pubblica la pagina e controlla sul link vero. Si adatta ai layout responsive in automatico, perché ogni canvas è generato dal layout così com”è in quel momento.
Sovrapponilo alle animazioni native (opzionale). L”effetto si sposa benissimo con le interazioni While-scrolling-in-view di Webflow — anima le lettere di un titolo o aggiungi overlay a gradiente attorno all”immagine, e imposta attributi disintegration custom sullo stesso wrapper per orchestrare timing e intensità insieme.

Guida alla configurazione

Attributo	Valori	Default	Cosa fa
`fc-disintegration`	`component`	—	Il marcatore di ruolo che dice allo script quale elemento far disintegrare. Mettilo sul div che vuoi far dissolvere — è l'unico attributo obbligatorio.
`fc-disintegration-active-on-mobile`	`true · false`	`true`	Se l'effetto gira sui breakpoint mobile, da tablet in giù. Impostalo per disattivare l'effetto sugli schermi più piccoli, dove i canvas extra pesano di più.
`fc-disintegration-rotation-angle`	`gradi`	`30`	Il range di rotazione casuale per ogni frammento. Il valore effettivo è randomizzato tra meno l'attributo diviso due e l'attributo diviso due.
`fc-disintegration-rotation-amplitude`	`pixel`	`40`	Quanto lontano viaggiano i frammenti dalla loro posizione originale — alzalo e i pezzi volano via più lontano.
`fc-disintegration-cascade-offset`	`numero o percentuale`	`5`	Lo stagger tra l'animazione di ogni frammento. Usa 0 per nessun ritardo, oppure un valore come 10 (o una percentuale come 2%) per far animare ogni frammento leggermente dopo il precedente.
`fc-disintegration-start-point`	`sintassi start di ScrollTrigger`	`top top`	Quando inizia l'animazione durante lo scroll, con la sintassi di GSAP ScrollTrigger. Il default la fa partire quando la cima dell'elemento tocca la cima del viewport.
`fc-disintegration-end-point`	`sintassi end di ScrollTrigger`	`bottom top`	Quando finisce l'animazione, sempre con la sintassi di ScrollTrigger. Il default la fa terminare quando il fondo dell'elemento tocca la cima del viewport.

Risorse

Domande frequenti

Come creo un effetto disintegrazione in Webflow senza codice?: Clona il componente basato su GSAP, attiva il plugin ScrollTrigger e aggiungi l'attributo fc-disintegration="component" all'elemento che vuoi far dissolvere. Lo script legge i tuoi attributi e gestisce tutto il lavoro sui canvas, così non tocchi mai il JavaScript.
L'effetto disintegrazione funziona con i contenuti CMS di Webflow?: Sì. Dato che lo script colpisce qualsiasi elemento con l'attributo component, puoi metterlo dentro una Collection Item e si comporta esattamente come la versione statica. Evita solo di farlo girare su tutti gli item insieme — è dispendioso in risorse.
Perché i frammenti escono fuori dalla sezione?: L'effetto genera veri elementi del DOM — i canvas — che occupano spazio, quindi se il genitore non li ritaglia debordano dal viewport. Imposta overflow: hidden sulla sezione circostante per tenere ogni frammento contenuto.
Un effetto disintegrazione allo scroll pesa sulle performance?: Può pesare, perché ogni istanza crea un gruppo di canvas ed elabora i pixel durante lo scroll. Tienilo su uno o tre visual chiave per pagina, usa immagini sotto i 900px circa di larghezza e abbassa il numero di frammenti se ti serve più leggero.
L'effetto disintegrazione mantiene il testo alt per l'accessibilità?: Sì. Quando lo script sostituisce l'immagine originale con la sua versione canvas cattura il testo alt originale e lo riassegna all'immagine generata, così gli screen reader la annunciano esattamente come prima.

← Torna al corso