Il titolo che si alza dalla linea
Transizioni, Testo, Immagini
NuovaGratis
Torna alla libreria
Le stampe che si mettono in ordine
Venti piccole stampe astratte sparse un po' storte sulla carta: scegliendo un ordine, per colore, per forma o per anno, ognuna si alza, scivola su una curva fino al suo posto in colonna e atterra su una molla, una dopo l'altra. Sopra le colonne un'etichetta sottile entra lettera per lettera, una riga si disegna e il conto sale mentre arrivano. 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>Tally, prints in order</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a small archive of abstract prints, drawn by the script: a click on an order and every print slides to its new place -->
<main class="room" data-room>
<header class="top">
<p class="mark" data-mark aria-label="Tally">Tally</p>
<nav class="sort" data-sort aria-label="Sort the prints">
<span class="sort__by" data-by>Sort by</span>
<span class="sort__keys">
<span class="sort__frame" data-frame aria-hidden="true"></span>
<button class="key" type="button" data-key="colour" data-autoclic aria-pressed="false"><span class="key__t">Colour</span></button>
<button class="key" type="button" data-key="shape" data-autoclic aria-pressed="false"><span class="key__t">Shape</span></button>
<button class="key" type="button" data-key="year" data-autoclic aria-pressed="false"><span class="key__t">Year</span></button>
<button class="key" type="button" data-key="loose" data-autoclic aria-pressed="true"><span class="key__t">Loose</span></button>
</span>
</nav>
</header>
<!-- the column heads (a thin label, a count and a hairline) and the prints: both built by the script -->
<section class="board" data-board aria-label="Prints">
<div class="heads" data-heads aria-hidden="true"></div>
<ul class="prints" data-prints></ul>
</section>
<footer class="foot" aria-hidden="true">
<p class="foot__status"></p>
<p class="foot__total" data-total></p>
</footer>
<p class="sr" data-live aria-live="polite"></p>
</main>
<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.
119 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 «Le stampe che si mettono in ordine» da Animorio e adattala al mio sitoCosa fa
L'archivio di stampe di un piccolo studio inventato, Tally: venti immagini astratte disegnate dallo script in SVG, ognuna con una forma sola (cerchio, quadrato, triangolo, arco), a volte con una riga d'orizzonte, in quattro inchiostri: nero, grigio pietra, sabbia e un vermiglio usato su tre stampe soltanto. All'apertura il nome sale lettera per lettera allargandosi, gli ordini compaiono uno dopo l'altro, una cornice sottile si posa su Loose e le stampe vengono posate sulla carta una alla volta, in disordine e un po' storte. Scegliendo Colour, Shape o Year la cornice salta sul nuovo ordine con una molla e ogni stampa si alza con la sua ombra, si inclina nel verso in cui parte, scivola su una curva fino al suo posto in una colonna e lì atterra: supera il punto di un soffio, torna, si schiaccia appena e si raddrizza, mentre la stampa sopra di lei nella colonna sente il colpo. Partono una dopo l'altra nell'ordine dei posti nuovi, così le colonne si riempiono dall'alto. Sopra ogni colonna l'etichetta (Vermilion, Circle, 2024) entra dal basso lettera per lettera, stretta e poi larga, la riga sottile si disegna da sinistra e il conto sale di uno a ogni stampa che arriva. Loose rimette tutte le stampe esattamente dov'erano. In basso una riga dice l'ordine in uso; sul computer, passando su una stampa, la stampa si alza di un pelo, la forma si sposta verso il puntatore e la riga dice titolo, colore e anno.
Come funziona
Le stampe sono dati
PRINTS è un elenco: titolo, colore, forma, anno e una delle tre composizioni di ogni forma. Lo script disegna ogni stampa come un SVG 100 per 100 con la forma riempita da una classe (f-vermilion, f-ink…) che legge il colore da :root, e per ogni ordine raggruppa le stampe per quel campo: le colonne seguono l'ordine dei colori e delle forme, gli anni dal più vecchio, e dentro la colonna le stampe vanno per anno o per colore.
Ogni posto calcolato prima
Per ogni ordine lo script calcola il posto di ogni stampa: le colonne sono larghe una, due o tre stampe, quanto serve perché le stampe siano più grandi possibile in tutti gli ordini (larghe una se restano almeno di 80 pixel, così si alzano come barre), e il disordine è una griglia con le stampe mescolate da un generatore a seme fisso, spostate e girate di poco. Le stampe sono posizionate in assoluto e GSAP muove solo x, y e rotation: niente misure del DOM durante il movimento.
La curva e la molla
Ogni stampa viaggia su una curva di Bézier quadratica dal punto in cui si trova a quello nuovo, col punto di controllo spostato di lato (ARC) e sempre verso l'alto, sopra le altre. Un tween porta p da 0 a 1 con una molla vera (SPRING decide quanto supera il punto) e a ogni fotogramma la stampa va al punto della curva con gsap.quickSetter. Oltre 1 la curva continua nella stessa direzione: l'overshoot è nel verso giusto. Le stampe partono STAGGER secondi una dopo l'altra, nell'ordine dei posti nuovi.
L'atterraggio
Il momento in cui la molla tocca per la prima volta il suo punto si calcola una volta sola, campionando la curva. Lì l'SVG si schiaccia (scaleX 1,03, scaleY 0,965 dal fondo) e si rialza con elastic.out, la stampa sopra nella stessa colonna scende di un pixel e mezzo e torna, e il conto della colonna sale di uno. Il sollevamento con l'ombra sta su un figlio, .print__in, e lo schiacciamento sull'SVG: tre elementi, ognuno con le sue proprietà, così i tween non si cancellano a vicenda.
Etichette, interruzioni, telefono e movimento ridotto
Le etichette sono lettere in span dentro una finestra con overflow hidden: le vecchie escono in alto, le nuove entrano dal basso allargandosi con font-stretch, e una parola troppo lunga per la colonna si stringe sull'asse wdth invece di essere tagliata. Un clic durante il movimento ferma la timeline e ne parte una nuova dai punti in cui le stampe si trovano. Sul telefono le colonne sono larghe una stampa e il disordine ha quattro colonne. Con il movimento ridotto le stampe svaniscono e ricompaiono al posto nuovo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PRINTS | script.js | 20 stampe | Le stampe: titolo, colore (vermilion, ink, stone, sand), forma (circle, square, triangle, arch), anno e composizione (0, 1 o 2). Un anno nuovo fa una colonna nuova. |
STAGGER | script.js | 0.035 | I secondi fra la partenza di una stampa e quella dopo: 0 = partono tutte insieme. |
GLIDE | script.js | 0.95 | I secondi che una stampa impiega per arrivare al suo posto nuovo. |
SPRING | script.js | 0.12 | Quanto una stampa supera il suo posto prima di fermarsi: 0 = per niente, 1 = molto. |
ARC | script.js | 0.16 | Quanto si piega la strada di una stampa: 0 = in linea retta. |
TILT | script.js | 3.5 | I gradi di cui le stampe in disordine sono storte; in colonna stanno dritte. |
SPEED | script.js | 1 | La velocità di tutto: 2 è il doppio, 0.5 la metà. |
Quando usarla
Per un archivio o un catalogo da riordinare senza cambiare pagina: le opere di un portfolio per anno o per tecnica, i prodotti di un negozio per colore o per categoria, le stanze di un albergo, i piatti di una carta, le date di un festival. Rende bene quando gli elementi sono piccole immagini quadrate tutte uguali di misura.
Sul telefono
Le stesse animazioni con le misure adattate: gli ordini vanno sotto il nome, le colonne sono larghe una stampa sola, il disordine ha quattro colonne e un'etichetta troppo lunga per la colonna (Vermilion) si stringe sull'asse della larghezza. Un tocco su un ordine fa partire il riordino.
Con il movimento ridotto
Niente scivola: all'apertura tutto compare in dissolvenza; cambiando ordine le stampe e le etichette svaniscono e ricompaiono già al posto nuovo, e la cornice dell'ordine scelto salta senza molla.
Trappole
- Con la molla quasi senza smorzamento le stampe superavano il loro posto del sei per cento della strada: trenta pixel su una corsa lunga, un rimbalzo da cartone animato. SPRING parte da 0.12, che lascia qualche pixel.
- Il conto di una colonna saliva all'atterraggio della prima stampa, ma la prima arriva prima che l'intestazione sia al suo posto: il numero compariva in alto a sinistra, sopra il nome. Ora il conto aspetta l'intestazione e sale un passo alla volta.
- Un clic su un altro ordine prima che le stampe atterrassero lasciava le intestazioni dov'erano all'inizio, in cima a sinistra, perché lo spostamento era dentro la timeline fermata: ora l'intestazione va subito alla sua colonna.
- Vermilion non stava nella colonna larga 68 pixel del telefono. Il rapporto fra larghezza voluta e larghezza misurata non basta, perché le lettere non si stringono in proporzione: la larghezza giusta sull'asse wdth si trova in qualche passo, misurando di nuovo.
- Il disordine con le righe incomplete (otto, otto e due) sembrava un errore: la griglia ora sceglie il numero di colonne che lascia l'ultima riga più piena, e le stampe sono diventate venti, che si dividono bene.
Librerie
GSAP 3.15.0, Roboto Flex (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 14 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.
