Lettere in piedi con l'ombra lunga
Testo, Scroll, 3D
NuovaGratis
Torna alla libreria
L’impaginato sulla griglia
Scorri dentro l’anteprima
Dietro la pagina dodici colonne sottili; davanti quattro blocchi, titolo, sottotitolo, testo e cifra. Scendendo, ogni blocco viene preso come in un programma di impaginazione, con la cornice e le maniglie, e salta di colonna in colonna cambiando larghezza e allineamento, finché la copertina è impaginata. Stile minimal.
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="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A layout set on the grid</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the cover of a made-up furniture catalogue, laid out while you scroll. Twelve thin columns stay still behind the
page; four blocks, a title, a subtitle, a paragraph and a figure, are picked up one at a time like in a layout
program and moved from column to column, changing width and alignment, until the final layout -->
<main>
<section class="apertura">
<p class="piccolo">Tessel, catalogue cover</p>
<h1 class="titolo">Four blocks,<br>twelve columns.</h1>
<p class="piccolo piccolo--tenue">Scroll to lay out the page.</p>
</section>
<section class="racconto" data-racconto>
<div class="palco">
<header class="testa">
<p class="piccolo">Catalogue cover</p>
<p class="piccolo piccolo--tenue stato" aria-hidden="true">
<span class="stato__riga" data-stato>Pasted in</span>
<span class="stato__riga" data-stato>Centred</span>
<span class="stato__riga" data-stato>On the grid</span>
<span class="stato__riga" data-stato>Preview</span>
</p>
</header>
<div class="pagina" data-pagina>
<div class="griglia" data-griglia aria-hidden="true"></div>
<h2 class="blocco" data-blocco="title"><span class="grande" data-grande>Tessel</span></h2>
<p class="blocco blocco--sotto" data-blocco="subtitle">Furniture, made slowly.</p>
<p class="blocco blocco--testo" data-blocco="text">Every piece starts as a drawing on squared paper and ends in a workshop of four people. We make tables, chairs and shelves in oak and ash, and we keep making only the ones that last.</p>
<div class="blocco blocco--cifra" data-blocco="figure">
<span class="grande grande--cifra" data-grande>48</span>
<span class="blocco--dida" data-dida>pieces a year, all made by hand</span>
</div>
<div class="guida" data-guida aria-hidden="true"></div>
<div class="guida" data-guida aria-hidden="true"></div>
<div class="cornice" data-cornice aria-hidden="true">
<span class="cornice__maniglia cornice__maniglia--a"></span>
<span class="cornice__maniglia cornice__maniglia--b"></span>
<span class="cornice__maniglia cornice__maniglia--c"></span>
<span class="cornice__maniglia cornice__maniglia--d"></span>
<span class="cornice__misura" data-misura>4 col</span>
</div>
</div>
</div>
</section>
<section class="apertura apertura--fine">
<h2 class="titolo titolo--medio">Set, and ready<br>for print.</h2>
</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.
29 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 «L’impaginato sulla griglia» da Animorio e adattala al mio sitoCosa fa
La copertina del catalogo di Tessel, un laboratorio di mobili inventato, su un bianco caldo con l’inchiostro nero e un solo vermiglio. Lo schermo si ferma e dietro la pagina si disegnano dall’alto, una dopo l’altra, dodici colonne sottili. I quattro blocchi sono incollati in alto a sinistra, uno sotto l’altro, come testo appena importato. Scendendo, un blocco alla volta viene preso: una cornice vermiglia con quattro maniglie gli si chiude intorno, due guide corrono lungo i suoi bordi, le colonne sotto di lui si scaldano e sopra la cornice compare quante colonne occupa. Il blocco salta di colonna in colonna, si allarga o si stringe, le parole scivolano nelle righe nuove e l’allineamento cambia: ogni parola raggiunge il suo posto su una molla misurata, va un pixel oltre e si posa, e le righe di sotto arrivano un attimo dopo la prima. Intanto il resto della pagina si fa da parte, più chiaro. Il titolo riempie sempre il suo blocco: cresce, prende peso e cambia larghezza sull’asse wdth. Prima tutto si centra, poi va sulla griglia: titolo stretto e alto in alto a sinistra, cifra in alto a destra, sottotitolo e testo giustificato in basso. Alla fine le colonne si ritirano come tende e la cifra si accende di vermiglio. Tutto segue lo scorrimento, avanti e indietro.
Come funziona
Tre impaginati scritti come dati
Per ogni blocco e ogni impaginato lo script ha una riga: la prima colonna, quante colonne occupa, dove sta (dall’alto, sotto il blocco prima, dal fondo della pagina), l’allineamento come numero (0 a sinistra, 0,5 al centro, 1 a destra) e se è giustificato. Il titolo ha anche larghezza e peso sugli assi variabili, la cifra la sua misura. Ci sono due serie di impaginati, una per il computer e una per il telefono, sempre su dodici colonne.
Ogni parola messa a mano
Il testo dei blocchi resta nella pagina per chi usa un lettore di schermo, ma quello che si vede sono le sue parole, una per elemento, con la larghezza misurata una volta. Lo script le va a capo da sé alla larghezza del blocco e le sposta per l’allineamento e la giustificazione: così anche l’allineamento si può mescolare, cosa che text-align non sa fare.
Un numero per blocco
La timeline, legata allo scorrimento con scrub SCRUB, muove per ogni blocco un solo numero da 0 a 2: in che impaginato si trova. Fra due impaginati colonna, larghezza e posizione si mescolano; con SNAP la colonna e la larghezza si arrotondano a colonne intere, e il blocco salta di colonna in colonna come quando lo si trascina con la griglia magnetica. Un secondo numero per blocco accende la cornice, le guide e le colonne sotto.
Le molle
Nel ticker di GSAP ogni parola, il titolo e la cifra inseguono il loro posto con una molla smorzata (STIFFNESS è la forza, BOUNCE quanto va oltre): un salto di colonna diventa un piccolo scatto che si posa. Le righe più in basso hanno una molla un poco più morbida (LAG), quindi arrivano dopo la prima, come un blocco tirato da un angolo. Anche la cornice ha la sua molla.
Il titolo che riempie il blocco
Il titolo è scritto a 100 pixel e ingrandito con scale fino a riempire la larghezza del blocco. Per sapere quanto è largo a ogni combinazione di wdth e wght lo script lo misura una volta su una griglia di valori e poi interpola, senza misurarlo a ogni fotogramma. L’altezza è quella dell’inchiostro, letta con measureText su un canvas, così la cima del titolo e quella della cifra stanno sulla stessa riga.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SNAP | script.js | true | Acceso, i blocchi saltano di colonna in colonna come con la griglia magnetica; spento, scivolano senza scatti. |
STIFFNESS | script.js | 240 | La forza della molla che tira ogni parola al suo posto: più alta, più svelta. |
BOUNCE | script.js | 0.35 | Quanto le parole vanno oltre il loro posto prima di posarsi: 0 per niente, 1 un rimbalzo vero. |
LAG | script.js | 0.3 | Quanto le righe di sotto arrivano dopo la prima: 0 tutte insieme, 0,6 molto in ritardo. |
GUIDES_OFF | script.js | true | Alla fine le colonne si ritirano, come l’anteprima di un programma di impaginazione. |
SCRUB | script.js | 0.6 | Quanti secondi ci mette la pagina a raggiungere lo scorrimento. |
Quando usarla
Per raccontare il lavoro di uno studio grafico, di una tipografia o di una rivista, per la pagina che presenta un catalogo o un numero nuovo, o per spiegare una griglia di impaginazione in un portfolio. Funziona con pochi blocchi brevi: un titolo di una parola, una frase, un paragrafo, una cifra.
Sul telefono
Uguale, con misure adattate: sempre dodici colonne, più strette e con lo spazio fra loro più piccolo; gli impaginati del telefono hanno blocchi più larghi e il testo giustificato in basso a tutta larghezza.
Con il movimento ridotto
Niente salti né molle: ogni blocco scelto si dissolve e ricompare già al suo posto nuovo; le colonne compaiono e spariscono con una dissolvenza.
Trappole
- La larghezza del titolo letta con getBoundingClientRect comprende lo scale che lo ingrandisce: rimisurato a ogni refresh di ScrollTrigger, quando è già grande, risulterebbe largo quanto è ingrandito e il blocco sbaglierebbe misura. Prima di misurare si toglie il transform e dopo si rimette.
- Spostati nell’ordine sbagliato, i blocchi passavano o atterravano sopra quelli ancora fermi (il sottotitolo che scende attraversava il testo). L’ordine è scelto per ogni passaggio: verso il centro parte prima il più basso, verso la griglia prima il titolo, che libera la parte alta; e mentre un blocco si muove gli altri si schiariscono, così quello scelto si legge sempre sopra.
- Misurare il titolo a ogni fotogramma per farlo entrare nel blocco vuol dire ricalcolare il layout sessanta volte al secondo. Lo si misura una volta su una griglia di valori di wdth e wght e si interpola.
- Con l’altezza della riga al posto di quella dell’inchiostro, la cima del titolo e quella della cifra non starebbero sulla stessa riga: la scatola di una riga ha sopra le lettere uno spazio che cresce con la misura. L’inchiostro si legge con measureText (actualBoundingBoxAscent) dopo che il carattere è arrivato.
Librerie
GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,9 KB; le librerie: GSAP + ScrollTrigger 45 KB.
Collaudo
Provata il 15 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Da fare
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.
