EN IT
Home Chi sono Learn Blog

Animazione grow & scatter da CMS in Webflow

Avanzato 24:53 webflowgsapcmsvariabiligrid

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.

Guarda su YouTube

Punti chiave

  • L'intero scatter è guidato da una sola variabile numerica (move-factor): il CSS di centratura moltiplica lo shift di ogni item per essa, così animandola da 1 a 0 gli offset si dissolvono e gli item si dispongono nella griglia.
  • Il CSS può leggere i dati CMS — un embed dentro l'item della collezione usa nth-child(order) e sibling-index() così ogni item conosce la propria posizione e calcola le sue coordinate nella griglia.
  • Imposta le altezze delle righe della grid a 100% ÷ righe (non auto) per un layout stabile, e crea la spaziatura con il padding dell'item invece del grid gap, che romperebbe le altezze percentuali.
  • Descrivi il layout in variabili (columns, rows) così la matematica di centratura è indipendente dalla griglia — cambia la griglia e aggiorni solo i numeri.
  • Fai partire lo scatter esattamente quando l'ultima immagine finisce di scalare: intervalli × stagger + durata (es. 11 × 0.2 + 0.8 = 3s).
  • I variable modes la rendono responsive gratis: dai a columns e rows valori diversi per breakpoint e la stessa animazione funziona.

Capitoli del video

  1. 00:00 Intro
  2. 01:09 Anatomia della collezione CMS e della struttura di pagina
  3. 07:18 Aggiungere le variabili Webflow
  4. 09:04 Analisi del CSS custom
  5. 13:48 Costruire l'interazione GSAP
  6. 19:04 Testare flessibilità e responsività
  7. 23:44 Outro

Questa animazione sembra molto più complicata di quanto sia: una gallery CMS dove ogni immagine cresce dal centro dello schermo in sequenza a stagger, poi si disperde in una griglia pienamente responsive. L’intero scatter è guidato da una sola variabile animata più un po’ di matematica CSS custom — e una volta che vedi come si incastrano i pezzi, diventa un sistema flessibile e riutilizzabile.

La vera lezione qui è come variabili, CSS custom e GSAP smettano di essere strumenti separati e inizino a lavorare come uno solo. È anche un ottimo esempio di CSS che legge silenziosamente i tuoi dati CMS.

Come funziona

Il layout. Una grid CSS (pictures_list) con colonne esplicite e altezze di riga di 100% ÷ righe (es. 50% per due righe) — le percentuali esplicite la tengono stabile dove auto diventa imprevedibile. La spaziatura viene dal padding su ogni item, non dal grid gap: un gap aggiunto a righe che già sommano al 100% farebbe traboccare la grid. Ogni item della collezione porta data-animate-item e ogni immagine data-animate-image, ordinati per un campo intero CMS order.

Il CSS legge il CMS. Il nucleo ingegnoso è un embed dentro l’item della collezione, così ogni item renderizza la propria copia di un piccolo blocco CSS. Quel blocco usa nth-child (legato all’order del CMS) e la funzione sibling-index() così ogni item conosce la propria posizione, poi calcola le sue coordinate nella griglia (colonna/riga) e uno shift X / shift Y — quanto deve muoversi per stare al centro della griglia. Entrambi gli shift sono moltiplicati per una variabile move-factor, e un translate li applica. A move-factor: 1 tutto è tirato al centro; a 0, ogni shift è 0 e gli item riposano nelle loro celle reali.

Tre variabili descrivono il sistema. move-factor (il motore dell’animazione, parte da 1), columns e rows. Dato che la matematica di centratura è scritta in termini di columns e rows, è indipendente dalla griglia — cambia la griglia e aggiorni solo quei numeri.

L’interazione GSAP è due action. Al page load: una action animate che scala le immagini da 0 alla loro scala nel designer con uno stagger (offset time 0.2s) per il grow-in; poi una action animate variable che porta move-factor da 1 a 0 per lo scatter. Lo start dello scatter è pura aritmetica — deve iniziare esattamente quando l’ultima immagine finisce di scalare: (numeroItem − 1) × stagger + durata. Con 12 immagini: 11 × 0.2 + 0.8 = 3s. GSAP interpola la variabile in modo fluido e il CSS fa il resto.

La responsività è gratis. Breakpoint diversi vogliono spesso griglie diverse. Dato che columns e rows sono variabili, aggiungi variable modes (tablet, landscape, portrait) con valori diversi (es. tablet 4×3, portrait 3×4). La matematica di centratura li rilegge per breakpoint, così la stessa animazione funziona ovunque — nessuna ricostruzione per breakpoint.

Come si usa

  1. CMS + grid. Una collezione pictures con un campo image e un campo intero order (ordina la collection list per esso). Costruisci una grid con le tue colonne e imposta le altezze di riga a 100% ÷ righe in grid edit mode. Aggiungi padding a pictures_item per la spaziatura. Marca gli item data-animate-item e le immagini data-animate-image.

  2. Variabili. Crea variabili numeriche move-factor (1), columns e rows impostate sulla tua griglia.

  3. CSS di centratura. Aggiungi un embed dentro l’item della collezione con il CSS che colpisce data-animate-item via nth-child(order), calcola shift X/shift Y da sibling-index(), columns e rows, li moltiplica entrambi per move-factor e applica un translate. (Incollalo dal cloneable — vedi la nota sotto.)

  4. Interazione. Interazione GSAP al page load. Action 1: animate scale from 0 su data-animate-image, 0.8s, power2-out, stagger offset-time 0.2s. Action 2: animate variable move-factor to 0, 0.8s, power2-out, start = (count − 1) × 0.2 + 0.8.

  5. Responsive. Aggiungi variable modes per i breakpoint dove vuoi una griglia diversa, aggiornando columns/rows (e la grid + altezze di riga) di conseguenza.

Il CSS custom di centratura (il blocco con nth-child / sibling-index()) si incolla dal cloneable — prendilo lì e verifica che i nomi di variabili e attributi corrispondano al tuo progetto.

Risorse

Domande frequenti

Come può una sola variabile animare un'intera griglia di item verso posizioni diverse?
Il CSS di centratura calcola lo shift orizzontale e verticale di ogni item e li moltiplica entrambi per una variabile move-factor condivisa. A factor 1 gli item sono tirati al centro; anima il factor a 0 e ogni shift diventa 0, così tutti gli item si dispongono nelle loro celle reali insieme — una variabile, molte posizioni.
Il CSS può leggere un campo CMS in Webflow?
Indirettamente, sì. Metti un embed con CSS dentro l'item della collezione così ogni item renderizza la propria copia, e usa nth-child legato al campo order del CMS (più la funzione sibling-index()) così ogni istanza conosce la propria posizione nella lista e calcola le proprie coordinate nella griglia.
Perché impostare le altezze delle righe in percentuale e usare il padding invece del grid gap?
Altezze di riga esplicite pari a 100% ÷ numero-righe tengono il layout stabile dove auto può diventare imprevedibile. Un grid gap sopra righe che già sommano al 100% farebbe traboccare la grid e la romperebbe, quindi la spaziatura si crea con il padding su ogni item.
Come rendo responsive questa animazione grow-and-scatter?
Salva columns e rows della griglia come variabili Webflow e aggiungi variable modes per ogni breakpoint con valori diversi (es. tablet 4×3, portrait 3×4). Dato che la matematica di centratura legge quelle variabili, la stessa animazione si adatta a ogni layout senza ricostruire l'interazione.

← Torna al corso