Il menu sotto il foglio
Menu, 3D, Fisica, Transizioni
NuovaGratis
Tutti i componenti
La bacheca dei fogli volanti
I lavori di una piccola stamperia risograph in tre colonne, e ogni lavoro è un foglio di carta: preso, si stacca dalla bacheca dal punto in cui lo tieni e pende dalla mano piegandosi come una trave sotto il suo peso; portato di lato, la parte dietro si alza e sventola e quella davanti viene premuta giù. Lasciato, scende sul posto che si è aperto su un cuscino d’aria, mentre gli altri fogli si scostano uno dopo l’altro come vagoni.
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>The print studio board</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the jobs of a small riso print studio in three columns. Every job is a sheet of paper: picked up it peels
off the board and hangs from the hand, bending under its own weight and catching the air as it travels;
let go, it floats down into the place that opened for it while the others slide apart -->
<section class="board" aria-label="Print jobs" data-board data-autoclic>
<div class="board__track" data-track></div>
</section>
<p class="sr" id="board-help">Press space to pick a job up, the arrows to move it, space again to put it down, escape to put it back.</p>
<p class="sr" aria-live="assertive" data-live></p>
</main>
<div class="layer" aria-hidden="true" inert data-layer></div>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.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.
79 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 bacheca dei fogli volanti» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco tre colonne grigio chiaro, Proofing con la sua lente, On the press col tamburo della macchina e Ready con un pacco, ognuna col suo conteggio. Dentro, otto lavori su fogli bianchi: il titolo (Gig poster, Seed packets, Menu cards, Summer zine…), il cliente, quante copie e in che formato (120 × A3) e i due inchiostri scritti nel loro colore, Fluo pink, Blue, Teal, Burgundy; a destra una piccola prova di stampa con due forme sovrapposte nei due inchiostri, la seconda un filo fuori registro. Aprendo la pagina le colonne salgono e i fogli ci cadono sopra uno dopo l’altro. Col mouse sopra, un foglio si alza appena e l’ombra cresce. Preso col mouse, o con un tocco lungo sul telefono, il foglio si stacca dal punto in cui lo tieni: quel punto sale verso di te mentre i lati restano un attimo appoggiati e poi si sollevano, e il foglio pende dalla mano in due ali che si piegano sotto il loro peso, più scure dove girano via dalla luce, con un’ombra morbida che si allontana sotto di lui. Portato di lato, la parte dietro si alza e sventola come una bandiera e quella davanti viene premuta giù; frenando, la coda si arriccia in avanti e poi torna; portato in su o in giù, il foglio si inclina. Dove cadrebbe si apre un posto incavato e gli altri fogli si scostano su molle, uno dopo l’altro lungo la colonna, spingendosi come vagoni, col bordo dietro che si alza un poco nella corrente; la colonna sotto il foglio si scurisce e i conteggi girano come una linguetta di carta. Lasciato, il foglio viene portato sopra il suo posto e scende su un cuscino d’aria, con le ali che si sollevano mentre cala; posato, i fogli accanto vengono soffiati appena via e tornano. Sul telefono le colonne scorrono di lato, anche da sole quando il foglio è tenuto vicino al bordo. Con i tasti si prende un lavoro con la barra spaziatrice, lo si porta con le frecce (il foglio vola sul posto nuovo) e lo si posa con la barra; Esc lo rimette dov’era.
Come funziona
Il foglio sopra la pagina
Preso, il lavoro resta nella sua lista come posto vuoto: il suo pulsante diventa trasparente e tiene il fuoco, e sotto si vede l’incavo. Sopra la pagina uno strato fisso riceve sedici copie della scheda, ognuna ritagliata a una striscia della sua larghezza e messa in 3D con translate3d e rotateY dove passa la carta, dentro un contenitore con la prospettiva centrata sul punto in cui la si tiene: così il foglio cresce intorno alla mano mentre sale.
Due travi tenute dalla mano
Il punto preso segue la mano; a destra e a sinistra il foglio è una trave fatta di pezzi. Su ogni pezzo pesa WEIGHT, la spinta della mano che accelera o frena (al contrario dell’accelerazione) e l’aria: di traverso cresce col quadrato della velocità, lungo il foglio la parte che resta dietro si alza e quella davanti viene premuta (AIR), e sulla coda corre un’onda (FLUTTER). Sommati dalla punta verso la mano danno il momento in ogni giuntura, e la curvatura è momento diviso rigidità (Eulero-Bernoulli, rigidità = STIFFNESS × 10¹⁰), al massimo 0,3 radianti per giuntura e circa 60 gradi in tutto. Le giunture inseguono quella curva su molle (24 radianti al secondo, smorzamento 0,28) in passi di 1/120 di secondo, quindi il foglio oscilla e si assesta.
La bacheca sotto
Se la curva passerebbe sotto la bacheca, una ricerca per bisezione trova quanta parte della piega tenere perché il punto più basso la tocchi appena: per questo, appena preso, il foglio si stacca dal punto tenuto mentre i lati restano appoggiati, e posato si spiana da solo.
Luce e ombra
Ogni striscia è scurita col coseno fra la sua faccia e una luce che arriva da sinistra in alto (al massimo 0,2, la carta è opaca), con un gradiente dal valore di un bordo a quello dell’altro, così non si vedono gradini. L’ombra è un rettangolo sfocato sotto la proiezione del foglio con quella luce (x + z·0,3): più il foglio sale, più l’ombra scende, si allarga e si sfuma. Mosso in su o in giù, tutto il foglio si inclina con rotateX secondo la velocità.
Il posto e i vagoni
Il posto va nella colonna più vicina al centro del foglio, davanti alla prima scheda la cui metà sta più in basso di quel centro. Spostando il posto nel DOM, ogni scheda tiene dov’era come uno scarto su una molla (FLIP con molle, rigidità ROOM e smorzamento 0,7), che parte CASCADE secondi dopo per ogni scheda di distanza dal posto. Dopo le molle un passaggio tiene ogni scheda ad almeno 3 pixel da quella sopra e le passa la velocità, come vagoni; la velocità alza un poco il bordo dietro (rotateX). Il conteggio gira con yPercent e rotationX.
Posarlo, tasti, dita e anteprima
Lasciato, il punto preso viene portato sopra il posto (letto a ogni fotogramma, perché scivola ancora) e abbassato al 40% di LIFT, poi scende alla bacheca in 0,24 secondi: l’aria lo frena e solleva le ali, la bacheca le spiana, e quando è piatto e fermo le copie spariscono e nello stesso fotogramma si vede la scheda vera; le vicine ricevono un soffio di 120 pixel al secondo. Con i tasti una mano su una molla porta il foglio sul posto scelto dalle frecce, e il bordo del fuoco sta sul foglio; una regione aria-live dice dov’è. Al telefono il foglio si prende con un tocco lungo (0,28 secondi), poi la pagina sta ferma e vicino al bordo le colonne scorrono da sole. Un clic da script sulla bacheca (l’anteprima) porta un lavoro lungo un arco in un’altra colonna; quattro spostamenti rimettono tutto com’era.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LIFT | script.js | 50 | Quanto si alza un foglio preso, in pixel verso di te. |
STIFFNESS | script.js | 0.1 | Quanto è rigida la carta: bassa si piega come carta velina, alta resta piatta come un cartoncino. |
WEIGHT | script.js | 1700 | Quanto pesa la carta che pende dalla mano, in pixel al secondo al quadrato. |
AIR | script.js | 0.0012 | Quanto l’aria prende il foglio mentre viaggia. |
FLUTTER | script.js | 0.8 | Quanto sventola la parte dietro mentre il foglio viaggia. |
ROOM | script.js | 360 | Con che slancio gli altri fogli fanno posto: la rigidità delle loro molle. |
CASCADE | script.js | 0.035 | I secondi fra un foglio e il successivo mentre il posto si apre lungo la colonna. |
COLUMNS | script.js | [['Proofing', [['Gig poster', 'Lantern Hall', '120 × A3', ['Fluo pink', 'Blue']], …]], …] | Le colonne e i loro lavori: titolo, cliente, quante copie e in che formato, i due inchiostri (quelli che hanno un colore in :root, come Teal o Fluo pink, si colorano da soli). |
Quando usarla
Per i lavori di una tipografia o di uno studio, il piano di una rivista, gli ordini di un laboratorio, le candidature a un annuncio, i compiti di una squadra: ovunque le cose passano da uno stato all’altro e si vuole che spostarle sia un piacere.
Sul telefono
Le colonne stanno affiancate e scorrono di lato dentro il loro riquadro, con lo scatto su ogni colonna; un foglio si prende con un tocco lungo, così il dito può ancora scorrere, e tenuto vicino al bordo fa scorrere le colonne da solo. Mentre lo si porta la pagina sta ferma.
Con il movimento ridotto
Il foglio non si alza e non si piega: segue la mano piatto, con un’ombra ferma che dice che è preso; il posto si apre di colpo, gli altri fogli si spostano senza scivolare e il foglio lasciato compare al suo posto con una dissolvenza. Niente entrata e niente conteggi che girano.
Trappole
- La prima carta era una catena libera di punti (Verlet) tenuta insieme solo dalle distanze fra vicini: si piegava di colpo in una giuntura, toccava la bacheca e si ripiegava su sé stessa, col testo al rovescio. È diventata due travi tenute dalla mano, con la curvatura data dal momento e un limite all’angolo di ogni giuntura e di tutto il foglio.
- Le strisce scurite con un colore pieno facevano gradini e il foglio sembrava lamiera: l’ombra va sfumata dentro ogni striscia da un bordo all’altro e tenuta leggera.
- Le schede che fanno posto, ognuna con la sua molla e il suo ritardo, a volte si accavallavano quando il posto entrava e usciva in fretta da una colonna: dopo le molle un passaggio le tiene staccate e passa la velocità a quella spinta.
- La copia di carta e la scheda vera devono coincidere al pixel quando si scambiano: il foglio si posa sulla posizione del posto letta a ogni fotogramma (il posto può ancora scivolare sulla sua molla), e lo scambio avviene solo quando la carta è piatta e ferma.
- Anche la barra spaziatrice su una scheda manda un clic con detail 0, come quello dell’anteprima: la dimostrazione parte solo se il bersaglio del clic è la bacheca stessa.
- Per provare il movimento fotogramma per fotogramma serve il tempo finto del browser fermo (clock.pauseAt): con l’orologio che va, il tempo delle foto stesse fa correre l’animazione e i tempi misurati sono sbagliati.
Librerie
GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 14 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 6 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.
