Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
La griglia che si monta
Scorri dentro l’anteprima
Scorrendo, sei colonne scendono dall’alto, si separano, si stringono dentro i margini e alla fine ci cadono dentro titolo, foto e testo; in ogni colonna c’è la sua larghezza, che cambia mentre la griglia si monta.
Il codice
Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN. Nelle schede React e Vue la stessa demo è già un componente, che spegne le sue animazioni quando esce dalla pagina.
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>La griglia che si monta</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<section class="apertura">
<p class="nota" data-nota>Scorri: le colonne scendono, si separano, si stringono dentro i margini, e alla fine ci cadono dentro le cose.</p>
<h1 class="apertura__titolo">Una griglia si monta in tre mosse.</h1>
</section>
<!-- la scena: alta cinque schermi, il palco resta fermo (sticky) e lo scorrimento muove tutto -->
<section class="scena" data-scena aria-label="Come si monta una griglia">
<div class="palco" data-palco>
<div class="griglia" data-griglia aria-hidden="true"></div>
<div class="passi" data-passi>
<i class="passi__segno" data-segno aria-hidden="true"></i>
<ol class="passi__elenco">
<li class="passo" data-passo>Colonne</li>
<li class="passo" data-passo>Intercolonnio</li>
<li class="passo" data-passo>Margine</li>
<li class="passo" data-passo>Contenuto</li>
</ol>
</div>
<!-- i contenuti che alla fine cadono nelle colonne -->
<div class="blocco blocco--titolo" data-blocco><span>Il foglio di settembre</span></div>
<div class="blocco blocco--figura" data-blocco>
<svg viewBox="0 0 200 160" preserveAspectRatio="xMidYMid slice" aria-hidden="true" focusable="false"><rect width="200" height="160" fill="#E9DFC9"/><circle cx="148" cy="48" r="20" fill="#E3A33F"/><path d="M0 104Q50 86 100 98T200 92V160H0Z" fill="#8FA36A"/><path d="M0 126Q60 112 120 124T200 118V160H0Z" fill="#5E7A45"/><path d="M34 98V70M34 70q-10-8-14-20q12 4 14 20q2-16 14-20q-4 12-14 20" stroke="#3D5A2E" stroke-width="3" fill="none"/></svg>
</div>
<div class="blocco blocco--testo" data-blocco><i></i><i></i><i></i><i></i><i></i><i></i></div>
<div class="blocco blocco--testo blocco--corto" data-blocco><i></i><i></i><i></i><i></i></div>
<p class="didascalia" data-didascalia aria-live="polite"></p>
</div>
</section>
<section class="chiusura">
<h2 class="chiusura__titolo">La griglia resta, anche quando non si vede.</h2>
<p class="chiusura__testo">Le colonne danno la misura, l’intercolonnio le tiene staccate, il margine le tiene lontane dal bordo. Poi le cose si appoggiano a quei bordi, e la pagina sembra in ordine senza che nessuno sappia perché.</p>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
<script src="script.js"></script>
</body>
</html>Playground
Cambia valori, colori e testi con le manopole e guarda l’animazione rispondere dal vivo. Oppure scrivi tu nel codice. Poi scarica la cartella con le tue modifiche.
36 valori da cambiare
Oppure chiedila a Claude Code
Col connettore di Animorio, Claude Code la prende da qui con tutta la sua guida e la adatta al tuo progetto. Incolla questa richiesta:
Prendi «La griglia che si monta» da Animorio e adattala al mio sitoCosa fa
Una lezione di impaginazione in quattro mosse, dentro una scena che resta ferma mentre scorri. Le colonne partono come una striscia nera in alto, scendono fino in fondo e intanto passano dal nero al grigio; poi si separano e fra loro compare l’intercolonnio, color mattone; poi si stringono e ai lati compare il margine, azzurro. In ogni colonna c’è la sua larghezza in pixel, che cala mentre la griglia si monta. In alto a sinistra i passi, col quadratino che scivola su quello attuale; in basso una didascalia grande, le cui lettere salgono dalla maschera a ogni mossa. Alla fine le colonne sbiadiscono in guide e ci cadono dentro un titolo, una figura e due blocchi di testo, ognuno sui bordi delle sue colonne.
Come funziona
Un numero solo
La scena è alta cinque schermi e il palco è sticky. Un tween porta un oggetto { p } da 0 a 1 legato allo scorrimento con scrub 0,6, e a ogni aggiornamento una funzione ridisegna tutto da p: ogni mossa ha la sua finestra (colonne da 0,02 a 0,22, intercolonnio da 0,27 a 0,45, margine da 0,5 a 0,68, contenuti da 0,72 a 0,96), passata per power2.inOut.
La larghezza di una colonna
Con n colonne, intercolonnio g e margine m, ogni colonna è larga (W − 2m − (n − 1)g) / n, e la colonna i comincia a m + i(larga + g). Mentre g e m crescono da zero la formula resta la stessa: le colonne si separano e si stringono da sole, e la scritta in mezzo dice il numero giusto. Sotto i 760 px le colonne sono quattro.
Scritte che si leggono su tutto
Passi, larghezze e didascalia sono bianchi con mix-blend-mode: difference, quindi scuri sulla carta e chiari sul nero. Il palco sticky fa gruppo a sé, e la differenza si fa solo con quello che c’è dentro: per questo ha un fondo suo, uguale alla pagina.
Le cose cadono al loro posto
Ogni contenuto ha una colonna d’inizio, quante colonne occupa e un’altezza. La sua x si calcola con la stessa formula delle colonne, e la sua caduta ha una finestra dentro l’ultima mossa, sfalsata di 0,14, passata per bounce.out: tornando su, risale.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
GRANDE, PICCOLA | script.js | 6/16/32, 4/12/16 | Colonne, intercolonnio e margine sullo schermo largo e sul telefono. |
MOSSE | script.js | 4 finestre | Dove comincia e finisce ogni mossa, in frazioni della scena. |
POSTI | script.js | 4 contenuti | Dove cadono i contenuti: colonna d’inizio, quante colonne, altezza. |
--canale, --bordo | style.css | #C4553B, #5B7FA6 | I colori dell’intercolonnio e del margine. |
Quando usarla
Per spiegare un metodo a passi, in un sito di design o in una pagina che racconta come lavori: la griglia è un pretesto, al posto delle colonne possono salire le fasi di un progetto.
Sul telefono
Al telefono la griglia ha quattro colonne, intercolonnio di 12 px e margine di 16, e i contenuti cadono in un altro ordine; la didascalia lo dice.
Con il movimento ridotto
Niente scena ferma: la griglia è già montata e piena, i passi sono tutti accesi e la didascalia dice l’ultima mossa.
Trappole
- mix-blend-mode dentro un elemento sticky si fonde solo col suo gruppo: senza un fondo sul palco le scritte bianche restano bianche sulla carta.
- Uno ScrollTrigger con scrub ma senza animazione passa a onUpdate il progresso crudo: per avere il ritardo bisogna animare un oggetto { p } con un tween.
- Calcolare le colonne arrotondando la larghezza invece dei bordi fa ballare di un pixel gli intercolonni mentre si aprono.
- Se da largo lo schermo diventa stretto la griglia cambia numero di colonne: si ricostruisce in onRefreshInit, prima che ScrollTrigger rimisuri.
Librerie
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,9 KB; le librerie: GSAP + ScrollTrigger 45 KB.
Collaudo
Provata il 28 settembre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Fatto
Licenza d’uso
Puoi usarla nei tuoi progetti e in quelli dei tuoi clienti. Non puoi rivenderla né ridistribuirla così com’è. GSAP resta sotto la sua licenza Standard. Licenza completa.
