Il menu a mazzetta di colori
Menu, Fisica, Transizioni, Hover
NuovaGratis
Tutti i componenti
Il grafico che si raccoglie
I chilometri di un'app di corsa, una barra al giorno o al mese, ognuna su una molla: dalla settimana al mese il grafico si allontana come una macchina da presa, dal mese all'anno i trenta giorni volano uno dopo l'altro dentro la barra di settembre e ci si impilano. Sopra, una linea di livello segue il puntatore e lascia arancione solo quello che supera la barra scelta.
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 gathering chart</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>
<main class="stage">
<!-- the distance card of a running app: a bar a day, or a bar a month. Every bar is a spring. From the week to the
month the chart zooms out and the other days slide in; from the month to the year the days fly into
September's bar and pile up into it, while the other months rise. Over the chart a level line follows the
pointer or the finger from bar to bar: the bars that beat the one under it stay coloured above the line.
The chart is drawn by the script on a canvas; the numbers are in a table for screen readers -->
<section class="runs" aria-labelledby="runs-title" data-runs>
<div class="runs__head">
<h2 class="runs__title" id="runs-title">Distance</h2>
<div class="period" role="tablist" aria-label="Period" data-periods data-autoclic>
<span class="period__thumb" aria-hidden="true" data-thumb></span>
<button class="period__btn" type="button" role="tab" aria-controls="runs-plot" data-period>Week</button>
<button class="period__btn" type="button" role="tab" aria-controls="runs-plot" data-period>Month</button>
<button class="period__btn" type="button" role="tab" aria-controls="runs-plot" data-period>Year</button>
<span class="period__ink" aria-hidden="true" data-ink></span>
</div>
</div>
<p class="runs__figure"><span class="runs__value" data-value></span><span class="runs__unit" data-unit>km</span></p>
<p class="runs__when" data-when></p>
<div class="plot" id="runs-plot" role="tabpanel" tabindex="0" data-plot>
<canvas class="plot__canvas" aria-hidden="true" data-canvas></canvas>
<div class="plot__ticks" aria-hidden="true" data-ticks></div>
<span class="plot__tag" aria-hidden="true" data-tag></span>
<div class="plot__days" aria-hidden="true" data-days></div>
</div>
<table class="sr" data-table></table>
<p class="sr" aria-live="polite" data-said></p>
</section>
</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.
24 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 «Il grafico che si raccoglie» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una scheda bianca dal bordo sottile: Distance, a destra tre periodi in una guida grigia, Week, Month e Year, sotto un totale grande e stretto, 55.3 km, con Sep 21 – 27, e un grafico a barre arancioni con i giorni sotto e i numeri della scala a destra; il giovedì, giorno di riposo, è un trattino grigio. Aprendo la pagina le barre crescono dalla linea dello zero una dopo l'altra, rimbalzando, mentre il totale conta. Scegliendo Month il grafico si allontana come una macchina da presa: la settimana si stringe nel suo posto, gli altri giorni del mese entrano dai due lati e i nomi dei giorni lasciano il posto alle date. Scegliendo Year il mese si abbassa alla scala dell'anno e i trenta giorni, ridotti a mattoncini, volano uno dopo l'altro sulla destra e si impilano nella barra di settembre, il primo in basso e l'ultimo in cima, ritagliati da un filo bianco che, finita la pila, sparisce; i numeri della scala scorrono verso i nuovi e poi salgono gli altri undici mesi, i più vicini per primi. Tornando indietro la pila si smonta dall'alto e i giorni tornano al loro posto; verso la settimana escono dalla pila solo i suoi sette giorni. Passando sul grafico, o scorrendoci col dito, una linea di livello si ferma all'altezza della barra sotto il puntatore e la segue su una molla: quella barra resta arancione e si allarga un poco, le altre diventano pallide sotto la linea, così chi la supera mostra solo la parte che sta sopra; a destra una targhetta scura legge il valore, in alto il totale diventa quel valore e sotto compare la data. Il giorno sotto il puntatore si scrive in nero.
Come funziona
Ogni barra è una molla
Le barre sono 41: i trenta giorni di settembre e gli undici mesi prima. Ognuna ha otto misure (il centro, la larghezza, il fondo, la cima, l'opacità, il raggio della cima, l'altezza minima e quanto è gonfia) e ognuna corre verso il suo obiettivo su una molla, calcolata a passi di 1/240 di secondo sul ticker di GSAP. Le altezze usano SPRING e rimbalzano; di lato le barre scivolano su una molla più frenata, così un viaggio lungo non sbatte mai contro le vicine. Il canvas si ridisegna solo quando qualcosa si muove.
La settimana è il mese visto da vicino
Nella settimana i giorni sono la stessa fila del mese, più larga e spostata perché i sette giorni riempiano il grafico; gli altri restano fuori dai lati, tagliati. Fra settimana e mese tutte le barre partono insieme sulla stessa molla: è una macchina da presa che si allontana o si avvicina, e l'ordine dei giorni non si rompe mai.
I giorni si impilano nel mese
Nell'anno ogni giorno ha il fondo dove finisce la somma dei giorni prima e la cima dove finisce la sua: la pila è settembre, e la sua altezza è il totale vero del mese. Il cambio va a passi: prima il mese si abbassa alla scala dell'anno dov'è, poi i giorni partono uno dopo l'altro (WAVE) e atterrano con poco rimbalzo, ritagliati da un filo del colore della scheda che a pila finita sparisce; i mesi salgono quando i giorni sono partiti tutti, i più vicini per primi. Tornando indietro la pila si smonta dall'alto e i giorni crescono alla scala nuova tutti insieme.
La scala che scorre
Il massimo della scala si arrotonda a quattro passi tondi sopra la barra più alta (24 km per giorni e settimana, 240 per l'anno) e cambia in scala logaritmica: le righe vecchie scendono verso lo zero mentre si spengono, le nuove arrivano dall'alto, e i numeri a destra le seguono. Le date sotto il grafico sono legate alle loro barre e viaggiano con loro.
La linea di livello
Il puntatore sceglie la colonna, più larga della barra; la linea va all'altezza di quella barra su una molla (LEVEL). Ogni barra si dipinge in due pezzi ritagliati sul suo profilo arrotondato: sopra la linea arancione, sotto un colore che va verso --soft quanto la linea è accesa, tranne la barra scelta, che resta arancione e si gonfia di SWELL. Il totale in alto conta fino a quel valore e la targhetta lo legge a destra; il numero della scala che le starebbe sotto si spegne.
Tastiera, dito, screen reader e anteprima
I periodi sono tab con le frecce, e il colore delle loro parole cambia proprio dove passa la pillola bianca: una copia scura delle parole è ritagliata con clip-path sulla pillola. Il grafico si raggiunge col tasto Tab: le frecce, Inizio e Fine spostano la linea e una regione aria-live legge data e valore; Esc la spegne. Una tabella nascosta ha tutti i valori del periodo. Col dito si scorre sul grafico di lato e la lettura resta un momento. Un clic da script sui periodi (l'anteprima della libreria) sceglie il successivo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SPRING | script.js | [190, 0.58] | Le molle delle barre: quanto sono rigide e quanto sono frenate (1 = senza rimbalzo). |
WAVE | script.js | 0.5 | I secondi che l'onda di un cambio di periodo impiega a correre sulle barre. |
LEVEL | script.js | [460, 0.78] | La molla della linea di livello che segue il puntatore di barra in barra: rigidità e freno. |
BAR | script.js | 0.6 | Quanta parte del suo spazio prende una barra, da 0,2 a 0,9. |
WIDEST | script.js | 26 | La larghezza massima di una barra, in pixel. |
SWELL | script.js | 0.18 | Quanto si allarga la barra sotto il puntatore (0 = per niente). |
Quando usarla
Per un'app di corsa, di bici o di passi, i consumi di una casa, le vendite di un negozio, le ore di sonno: ovunque gli stessi numeri si guardano per giorno, per mese e per anno. Il cambio fa vedere dove sta la settimana dentro il mese e di che giorni è fatto il mese, e la linea di livello risponde alla domanda che si fa davanti a un grafico a barre: quali hanno fatto meglio di questa?
Sul telefono
Su un telefono la scheda prende la larghezza dello schermo e il canvas si ridisegna nitido alla sua misura, con le scritte sempre della stessa grandezza. Col dito si scorre sul grafico di lato per leggere le barre, anche le trenta del mese, e la pagina scorre ancora in verticale; lasciato il dito, la lettura resta un momento e poi torna il totale.
Con il movimento ridotto
Le barre non viaggiano e non rimbalzano: cambiando periodo il grafico si spegne in dissolvenza, cambia e si riaccende, e il totale cambia subito. La linea di livello salta di barra in barra senza molla e la barra scelta non si allarga; i colori cambiano ancora in dissolvenza.
Trappole
- Con un ritardo diverso per ogni barra, fra settimana e mese i giorni lontani partivano da fuori con un viaggio lungo, arrivavano veloci e si ammucchiavano sulle vicine. Lo zoom è una macchina da presa: tutte le barre partono insieme sulla stessa molla, e così due barre in fila restano in fila in ogni istante.
- Con una molla sola per tutto, le barre che volano verso la pila andavano oltre di lato e sbattevano contro la pila come lastre. Di lato ora scivolano su una molla frenata; il rimbalzo resta solo in altezza.
- Il primo passo verso l'anno, il mese che si abbassa alla nuova scala, con la molla elastica schiacciava tutte le barre a terra per un attimo e il grafico sembrava vuoto: quel passo usa la molla frenata.
- Uscendo dall'anno verso la settimana, i giorni che finiscono fuori dal grafico lo attraversavano mentre crescevano. Dalla pila escono solo i sette giorni della settimana; gli altri si spengono dove sono e, una volta invisibili, saltano subito al loro posto.
- I mattoncini in volo si incrociano e, dello stesso arancione, si fondevano in macchie: i giorni in volo e nella pila hanno un contorno del colore della scheda, largo quanto la fessura, che si chiude a pila finita. E i mesi salgono solo quando i giorni sono partiti tutti, perché prima i mattoncini passavano davanti ad agosto mentre cresceva.
- Una barra che parte piatta e trasparente sale pallida, e il pallido è il colore delle barre sotto la linea di livello: una barra piatta prende l'opacità piena nel momento in cui parte.
- Due rettangoli pieni uno sopra l'altro, con i bordi a mezzo pixel, lasciano una riga chiara fra loro anche senza fessura: chiusa la fessura, ogni giorno della pila copre di 0,6 pixel quello sopra.
- Un confronto con NaN è sempre falso: le etichette, che partono senza posizione, non si spostavano mai. Si controlla il contrario, «non vicino».
- Due periodi con un numero diverso di barre non si possono abbinare barra per barra: qui le barre sono sempre le stesse 41, e un periodo dice solo dove stanno.
Librerie
GSAP 3.15.0, Archivo (font variabile, asse wdth) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 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.
