Il pulsante d'acqua
Pulsanti, SVG, Fisica, Hover
NuovaGratis
Tutti i componenti
Il grafico a colonne che si confrontano
Le vendite mese per mese di una piccola legatoria in colonne di filo, nello stile minimal: quelle dell'anno sono sottili e piene, quelle dell'anno prima restano dietro come contorni aperti. Cambiando anno le colonne piene si aprono in contorni e le nuove crescono dentro, sfalsate su molle; passando su un mese le colonne si scostano per fare posto e una quota da disegno tecnico misura la differenza fra le due cime, mentre la cifra del mese prende peso.
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 comparing column 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">
<!-- a small bindery's sales, month by month, in columns of wire: this year's columns are solid hairlines three
pixels wide, last year's stand behind them as thin open outlines. Choosing the other year, the solid columns
open into outlines and the new ones grow inside them; pointing at a month, the columns step aside to make
room and a dimension measures the difference between the two tops. The chart is drawn by the script -->
<section class="chart" aria-labelledby="chart-title" data-chart data-autoclic>
<header class="chart__head">
<div class="read">
<p class="read__brand" id="chart-title">Tallis Bindery · Sales</p>
<p class="read__figure" data-figure></p>
<p class="read__note" data-note></p>
</div>
<div class="side">
<div class="years" role="radiogroup" aria-label="Year" data-years></div>
<p class="legend" aria-hidden="true">
<span class="legend__item">
<svg class="legend__mark" viewBox="0 0 9 12" width="9" height="12"><rect x="3" y="0" width="3" height="12"/></svg>
<span class="legend__year" data-legend-now></span>
</span>
<span class="legend__item legend__item--then">
<svg class="legend__mark" viewBox="0 0 9 12" width="9" height="12"><path d="M0 12V0h9v12H8V1H1v11z"/></svg>
<span class="legend__year" data-legend-then></span>
</span>
</p>
</div>
</header>
<div class="plot" tabindex="0" role="group" data-plot>
<svg class="plot__svg" aria-hidden="true" data-svg>
<g class="plot__guides" data-guides></g>
<line class="plot__base" data-base/>
<g data-columns></g>
<g data-quotas></g>
</svg>
<div class="plot__marks" aria-hidden="true" data-quota-labels></div>
<div class="months" aria-hidden="true" data-months></div>
</div>
<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.
51 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 a colonne che si confrontano» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero, in alto a sinistra Tallis Bindery · Sales, il totale grande e leggero (€30,650) e sotto Jan–Sep 2026 · +6% on 2025; a destra la scelta dell'anno, 2025 / 2026, con una barretta sottile in mezzo che pende verso l'anno scelto, e sotto la legenda: una colonnina piena per il 2026 e un contorno per il 2025. Sotto, dodici mesi su una riga di base, con quattro righe guida appena visibili (€2k, €4k, €6k, €8k). Ogni mese ha due colonne una dentro l'altra: quella del 2026, piena, bianca calda e larga tre pixel, e quella del 2025, un contorno grigio di un pixel largo nove, aperto in basso. Così si vede subito se un mese è andato sopra il segno dell'anno prima o è rimasto sotto; ottobre, novembre e dicembre hanno solo il contorno, perché il 2026 non è ancora finito. All'apertura la riga di base si disegna da sinistra, salgono i contorni e poi crescono le colonne piene, una dopo l'altra, andando un pixel oltre e posandosi. Passando su un mese le altre colonne si scuriscono e si scostano su molle, prima le vicine, per fare posto accanto: lì una quota blu elettrico, come in un disegno tecnico, misura la differenza fra le due cime. Le linee di richiamo partono dal contorno, la linea di quota cresce dalla cima del 2025 a quella del 2026 con un trattino obliquo a ogni capo, e accanto alla punta che cresce la differenza conta fino al suo valore (+12%). Il nome del mese sotto diventa nero, più largo e più pesante, e in alto la cifra rotola nella vendita del mese e prende peso (€3,380, March 2026 · +12% on 2025). Scegliendo 2025, le colonne del 2026 sprofondano nella riga di base, i contorni del 2025 si chiudono in colonne piene e da sotto salgono i contorni del 2024; la barretta pende dall'altra parte e il totale passa a €45,170, All of 2025 · +9% on 2024. Tornando al 2026 succede il contrario: le colonne piene si aprono in contorni, le due metà che si separano e si assottigliano, e le nuove crescono dentro.
Come funziona
Una colonna che diventa contorno
Ogni anno e ogni mese è un oggetto con un'altezza (in euro) e un'apertura da 0 a 1, disegnato come un solo path SVG fatto di tre rettangoli: due lati e un cappello di un pixel. Ad apertura 0 i due lati sono larghi un pixel e mezzo e si toccano, quindi è una colonna piena di tre pixel; ad apertura 1 sono larghi un pixel e stanno ai bordi di un contorno largo nove (sette al telefono). Fra l'uno e l'altro si separano, si assottigliano e il colore passa dal bianco caldo al grigio: così la colonna dell'anno diventa il contorno dell'anno prima.
Molle sfalsate, con un pixel di troppo
Le altezze sono molle smorzate (GROW, smorzamento 0,86: per una colonna di 200 pixel il superamento è di circa un pixel) calcolate a passi di 1/240 s sul ticker di GSAP, col passo limitato a 1/30 s. Cambiando anno ogni colonna riceve il nuovo obiettivo con un ritardo di STAGGER secondi per mese: prima sprofondano quelle che se ne vanno (fermate a zero, senza rimbalzare fuori dalla riga di base), poi si aprono o si chiudono i contorni, poi crescono le nuove.
Le colonne che fanno posto
Passando su un mese, il suo spazio si allarga quanto serve alla quota (la larghezza della cifra si misura una volta e si tiene in memoria) e gli altri undici cedono la stessa parte ciascuno, così la riga resta lunga uguale. Ogni mese va al suo posto su una molla sua (SLIDE), con un ritardo che cresce con la distanza (RIPPLE): prima le vicine, poi le lontane. Il mese sotto il puntatore si cerca nei posti dove le colonne stanno andando, non dove sono, così passando da un mese all'altro non c'è sfarfallio.
La quota da disegno tecnico
La quota è un path ridisegnato a ogni fotogramma dalle altezze vere, quindi segue le colonne anche mentre crescono: le linee di richiamo partono a due pixel dal contorno e superano la linea di quota di quattro, la linea di quota cresce dalla cima vecchia a quella nuova in MEASURE secondi con i trattini obliqui ai capi, e la cifra accanto alla punta conta col segno già giusto fin dall'inizio. Le quote sono due, così quella che esce si spegne mentre la nuova misura.
Il carattere che prende peso
Archivo è un carattere variabile con l'asse del peso (100-900) e della larghezza (62-125): GSAP fa scorrere le variabili CSS --w e --wd. Il mese scelto passa a 700 di peso e 125 di larghezza con back.out, la cifra in alto rotola nel valore del mese e passa da 330 a HEAVY, e l'anno scelto si allarga e si fa pieno; le cifre sono tabellari, quindi non ballano.
Tastiera, dito e anteprima
Il grafico si raggiunge col tasto Tab e si legge con le frecce, Inizio, Fine ed Esc; gli anni sono un radiogroup con le frecce, e una riga per gli screen reader dice mese, vendita, differenza e valore dell'anno prima. Col dito si tocca un mese o si scorre di lato sul grafico (la pagina scorre ancora in verticale), e toccando di nuovo lo stesso mese, o fuori, si torna al totale. Un clic da script (l'anteprima della libreria) fa un giro di dodici secondi in una timeline GSAP: tre mesi, il 2025, un mese del 2025, di nuovo il 2026 e il riposo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
THIS_YEAR | script.js | [2840, 3390, 3380, …] | Le vendite dell'anno mese per mese, da gennaio: i mesi che devono ancora venire si lasciano fuori. |
LAST_YEAR | script.js | [2610, 3140, 3020, …] | Le vendite dell'anno prima, tutti e dodici i mesi. |
YEAR_BEFORE | script.js | [2380, 2950, 2710, …] | L'anno ancora prima, per il confronto dell'anno scorso. |
YEAR | script.js | 2026 | L'anno di THIS_YEAR. |
CURRENCY | script.js | '€' | Il segno davanti alle cifre. |
GROW | script.js | [120, 0.86] | La molla delle colonne: quanto è rigida e quanto è frenata (1 = senza superare la misura). |
STAGGER | script.js | 0.05 | I secondi fra una colonna e la successiva. |
SLIDE | script.js | [240, 0.8] | La molla con cui le colonne si scostano per fare posto alla quota. |
RIPPLE | script.js | 0.02 | Quanto più tardi, mese per mese, si scostano le colonne più lontane. |
MEASURE | script.js | 0.65 | I secondi in cui la quota misura la differenza. |
HEAVY | script.js | 640 | Il peso che prende la cifra del mese (il totale è a 330). |
Quando usarla
Per il pannello di un negozio o di un laboratorio, il riepilogo di fine mese, le prenotazioni di una struttura anno su anno, i risultati di un progetto: ovunque conta sapere se questo mese è andato meglio o peggio dello stesso mese dell'anno prima.
Sul telefono
Il grafico prende la larghezza dello schermo, i mesi diventano iniziali e il contorno si stringe a sette pixel; la quota e lo spazio che le si apre sono gli stessi. Col dito si tocca un mese o si scorre di lato sul grafico, e la pagina scorre ancora in verticale.
Con il movimento ridotto
Le colonne sono già al loro posto e cambiando anno cambiano di colpo, col grafico che si riaccende in dissolvenza; le colonne non si scostano, la quota compare in dissolvenza già disegnata, le scritte si scambiano in dissolvenza e i pesi cambiano senza molla.
Trappole
- Un contorno di un pixel su una posizione con la virgola diventa una riga grigia di due pixel, sfocata: a riposo il centro di ogni colonna si porta su mezzo pixel e le altezze sui pixel interi, così colonne e contorni sono nitidi; durante il movimento no, altrimenti scatterebbero.
- Cercare il mese sotto il puntatore nelle posizioni del momento faceva sfarfallare la scelta: il mese che si allarga sposta il confine e il puntatore finisce nel vicino. Si cerca nei posti dove le colonne stanno andando.
- Con la molla, una colonna che sprofonda superava lo zero e rimbalzava fuori dalla riga di base: sotto zero si ferma.
- La differenza che conta da zero partiva da +0% anche per un mese in calo e cambiava segno a metà: il segno si prende dal valore finale.
- I nomi dei mesi hanno la posizione scritta dallo script a ogni fotogramma: un'entrata con y di GSAP la cancellava. Entrano solo in dissolvenza.
- Altezze in pixel e posti in pixel si perdevano a un cambio di misura a metà movimento: le altezze stanno in euro e i posti in parti della larghezza, e al resize cambia solo il disegno.
Librerie
GSAP 3.15.0, Archivo (font variabile, assi wght e wdth) 5.3.0.
Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 16 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.
