La tabella allineata alla virgola

Tabelle, Testo, TransizioniGSAPImpegnativaPeso compresso: Demo 13 KBGSAP 28 KBGratisScarica lo zip

Nello stile minimal: un piccolo conto economico in due colonne di cifre tabellari, ogni cifra appesa alla sua virgola. Sopra due scelte, le unità (€ o € k) e i decimali (0 o 2): cambiando, ogni cifra si ricompone restando allineata. I caratteri che non servono più rotolano via, quelli che restano scivolano insieme al loro posto nuovo (passando alle migliaia le cifre attraversano la virgola di tre posti), quelli arrotondati rotolano alla cifra nuova come una ruota, i nuovi rotolano dentro; le colonne prendono la larghezza nuova su molle e una guida vermiglia sottile scende dal fermo di tabulazione di ogni colonna. Al passaggio su una riga i suoi numeri prendono peso senza lasciare la virgola.

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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The table aligned on the point</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>
  <main class="stage">
    <!-- the table aligned on the point: a small profit and loss in two columns of tabular figures, every figure
         hung on the decimal point. Above it two choices, the units and the decimals: changing them the figures are
         set again, still aligned on the point; the characters that stay slide to their new places, the ones that
         change roll, and the columns take their new width on springs. A row under the pointer takes weight -->
    <section class="sheet" aria-labelledby="pl-title" data-sheet data-autoclic>
      <header class="sheet__head">
        <div class="sheet__titles">
          <h2 class="sheet__title" id="pl-title">Profit and loss</h2>
          <p class="sheet__note"><span>Year to 31 December,</span> <span class="note-roll"><span class="note-roll__in" data-note>in euros</span></span></p>
        </div>

        <div class="choices">
          <div class="choice" role="radiogroup" aria-label="Units" data-group="unit">
            <span class="choice__label" aria-hidden="true">Units</span>
            <span class="choice__opts">
              <button class="opt" type="button" role="radio" aria-checked="true" data-value="1"><span class="opt__word">€</span></button>
              <button class="opt" type="button" role="radio" aria-checked="false" data-value="1000" aria-label="Thousands of euros"><span class="opt__word">€ k</span></button>
              <span class="choice__rule" aria-hidden="true" data-rule></span>
              <span class="choice__tick" aria-hidden="true" data-tick></span>
            </span>
          </div>
          <div class="choice" role="radiogroup" aria-label="Decimals" data-group="dec">
            <span class="choice__label" aria-hidden="true">Decimals</span>
            <span class="choice__opts">
              <button class="opt" type="button" role="radio" aria-checked="false" data-value="0" aria-label="No decimals"><span class="opt__word">0</span></button>
              <button class="opt" type="button" role="radio" aria-checked="true" data-value="2" aria-label="Two decimals"><span class="opt__word">2</span></button>
              <span class="choice__rule" aria-hidden="true" data-rule></span>
              <span class="choice__tick" aria-hidden="true" data-tick></span>
            </span>
          </div>
        </div>
      </header>

      <div class="board" data-board>
        <span class="board__rule" aria-hidden="true" data-top></span>
        <table class="figures" aria-labelledby="pl-title" data-table>
          <colgroup data-cols><col class="col-name"></colgroup>
          <thead><tr data-head><th class="head-name" scope="col"><span class="sr">Line</span></th></tr></thead>
          <tbody data-rows></tbody>
          <tfoot data-foot></tfoot>
        </table>
      </div>

      <p class="sr" aria-live="polite" data-live></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.

47 valori da cambiare

Apri il Playground

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 tabella allineata alla virgola» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco il titolo Profit and loss e sotto, in grigio, Year to 31 December, in euros. A destra due scelte scritte in piccolo, Units con € e € k, Decimals con 0 e 2: le opzioni stanno su una riga sottile come i fermi su un righello e sotto quella scelta, più scura e più pesante, sta in piedi una tacca vermiglia. Sotto, una tabella vera: una riga nera sottile in cima, da cui pende una tacca vermiglia proprio sopra la virgola di ogni colonna (il fermo di tabulazione decimale delle macchine da scrivere), le intestazioni 2025 e 2026, cinque righe divise da filetti chiarissimi (Revenue, Materials, Salaries, Rent and utilities, Software and tools) e il totale Operating profit, più pesante, con una riga nera sopra e la doppia riga dei contabili sotto. I costi sono fra parentesi, in grigio, e la parentesi di chiusura sporge a destra senza spostare le cifre. Scegliendo € k la nota sotto il titolo rotola a in thousands of euros, la tacca della scelta si abbassa, corre sotto la nuova opzione e si rialza un filo troppo alta; in ogni colonna una guida vermiglia sottile scende dal fermo fino in fondo alla tabella. Poi, riga dopo riga e una colonna dopo l’altra, i caratteri che non servono più (la virgola delle migliaia, le ultime cifre) rotolano in su e spariscono; la cifra intera scivola come un pezzo solo verso destra e le sue cifre attraversano la virgola, che resta al suo posto: 184,256.50 diventa 184.26, e il 5 arrotondato rotola in su fino al 6 mentre scivola. Le colonne si stringono su molle, le intestazioni e i fermi le seguono, la guida si ritira. Tornando a €, le cifre scivolano indietro e le cifre nuove rotolano dentro dal basso una dopo l’altra, partendo dalla virgola. Con 0 decimali la virgola e i centesimi rotolano via e la colonna scivola a destra; l’arrotondamento rotola le cifre che cambiano (19,540.80 diventa 19,541). Al passaggio del puntatore su una riga il nome e le cifre prendono peso su una molla, e tutto resta sulla stessa virgola. Ferma in poco più di un secondo.

Come funziona

Ogni carattere ha una chiave

Una cifra non si riscrive: si scompone. figure() prende gli euro, arrotonda in centesimi interi (niente errori di virgola mobile) e restituisce un carattere alla volta con la sua chiave, il valore di posizione assoluto: d5 è la cifra delle centinaia di migliaia in qualunque unità (in € k diventa la cifra delle centinaia), c3 la virgola delle migliaia, p il punto, ( e ) le parentesi di un costo. Al cambio, il carattere nuovo e quello vecchio con la stessa chiave sono lo stesso elemento: se la cifra è uguale scivola, se l’arrotondamento l’ha cambiata rotola; le chiavi che non ci sono più escono, quelle nuove entrano.

Le caselle, misurate al peso più forte

Ogni carattere sta in una casella sua, posata dallo script: le cifre (tabellari, tnum) hanno tutte la casella della più larga, misurata una volta sola al peso più forte che una riga può prendere (quello del totale sotto il puntatore), e così la virgola, il punto e le parentesi. Dentro la casella il carattere è centrato: una riga che prende peso ingrassa nelle sue caselle e non lascia la virgola. Le caselle si contano dalla virgola, a sinistra la parte intera, a destra punto e decimali, poi la parentesi di chiusura che sporge.

Tre tempi

Ogni cambio ha tre tempi: prima i caratteri che non servono rotolano in su e svaniscono (in metà del tempo di un rotolamento, ognuno RIPPLE secondi dopo quello più vicino alla virgola), poi quelli che restano partono tutti insieme, così la cifra scivola come un pezzo solo, su una molla smorzata con un pixel di troppo, e infine i nuovi rotolano dentro dal basso. Ogni cella parte ROW_DELAY dopo quella sopra e COLUMN_DELAY dopo quella accanto; le colonne partono nel verso del movimento, quella davanti per prima, così una cifra non entra mai nella colonna vicina.

Nel sistema della virgola d’arrivo

Le colonne cambiano larghezza su molle (col della tabella, scritte a ogni fotogramma), e con loro le intestazioni, i fermi e le guide. Se le cifre stessero sulla virgola in movimento farebbero due viaggi con due tempi diversi e si sparpaglierebbero: per questo ogni carattere vive nel sistema della virgola dove la colonna arriverà, e a ogni fotogramma gli si toglie quanto la colonna è ancora per strada. Al cambio i caratteri vengono riportati nel sistema nuovo senza muoversi sullo schermo: ognuno fa un viaggio solo, dritto, dal posto vecchio al nuovo.

La ruota e la finestra

Ogni casella è una finestra con clip-path inset(0 -6px), che taglia sopra e sotto e lascia respirare i lati. Una cifra che cambia rotola come una ruota: sale verso una cifra più alta, scende verso una più bassa, con back.out(1.1), cioè un pixel oltre e il ritorno. La casella si muove con un transform scritto dallo script, le cifre dentro con yPercent di GSAP: un elemento per lo script, il figlio per GSAP.

Tabella vera, tastiera e anteprima

Una table con colgroup, th scope col e scope row, e per ogni cifra un testo nascosto che dice minus 41,380.25 euros (le caselle sono aria-hidden). Le scelte sono due radiogroup con le frecce, Home ed End; le righe si raggiungono col tab e si scorrono con le frecce su e giù, e la riga col fuoco prende peso come sotto il puntatore. Una regione aria-live dice Figures in thousands of euros, two decimals. Un clic da script sul riquadro (l’anteprima della libreria) fa il giro intero: € k, 0 decimali, €, 2 decimali, con una riga che prende peso, e torna com’era.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`LINES`	script.js	`[['Revenue', 184256.5, 212840], …]`	Le righe: il nome, poi la cifra di ogni anno in euro (un costo è negativo e si mostra fra parentesi).
`YEARS`	script.js	`['2025', '2026']`	Le intestazioni delle colonne, una per ogni cifra di una riga.
`TOTAL`	script.js	`'Operating profit'`	Il nome del totale, che si calcola dalle righe.
`THOUSANDS`	script.js	`false`	All’apertura: in euro (false) o in migliaia di euro (true).
`DECIMALS`	script.js	`2`	All’apertura: 0 o 2 decimali.
`REST_WEIGHT`	script.js	`380`	Il peso delle cifre (da 100 a 1000).
`HOVER_WEIGHT`	script.js	`660`	Il peso delle cifre di una riga sotto il puntatore.
`TOTAL_WEIGHT`	script.js	`600`	Il peso delle cifre del totale.
`SLIDE`	script.js	`[170, 20]`	La molla di ogni carattere che scivola al suo posto nuovo: quanto è rigida e quanto è frenata.
`COLUMNS`	script.js	`[150, 19]`	La molla della larghezza delle colonne.
`ROLL`	script.js	`0.42`	I secondi in cui un carattere rotola alla sua cifra nuova.
`RIPPLE`	script.js	`0.014`	I secondi fra un carattere che rotola dentro o fuori e il successivo, partendo dalla virgola.
`ROW_DELAY`	script.js	`0.04`	I secondi fra una riga e la successiva.
`COLUMN_DELAY`	script.js	`0.1`	I secondi fra una colonna e l’altra.

Provali nel Playground

Quando usarla

Per i numeri che qualcuno legge davvero in colonna: il conto economico in un pannello di contabilità, un listino all’ingrosso, il riepilogo delle spese di un progetto, i budget di un’app di finanza, la pagina dei risultati di una piccola azienda. Va bene con poche righe (da tre a nove) e da una a tre colonne; la scelta delle unità e dei decimali serve a chi passa dal dettaglio al colpo d’occhio.

Sul telefono

A 390 pixel le due scelte vanno sotto il titolo, Units a sinistra e Decimals a destra; le cifre sono a 14,5 pixel e si stringono all’86% sull’asse della larghezza di Roboto Flex, le colonne si avvicinano (12 pixel fra l’una e l’altra) e i nomi lunghi vanno a capo stretti. Un tocco su una riga le dà peso, un altro tocco o un tocco fuori dalla tabella glielo toglie. Le animazioni sono le stesse.

Con il movimento ridotto

Niente scivola e niente rotola: cambiando unità o decimali le cifre sfumano, la tabella si ricompone al suo posto e le cifre nuove ricompaiono sfumando; la tacca della scelta è subito sotto la nuova opzione, la nota cambia con una dissolvenza e le guide non scendono. Una riga sotto il puntatore prende peso subito, senza molla. All’apertura tutto compare in dissolvenza.

Trappole

Con le cifre posate sulla virgola che si muove, ogni carattere faceva due viaggi (il suo e quello della colonna sulla molla, partiti in momenti diversi) e a metà cambio le cifre si sparpagliavano e finivano nella colonna vicina: ora ogni carattere vive nel sistema della virgola d’arrivo e alla colonna ancora in viaggio si toglie la differenza a ogni fotogramma.
Con i caratteri di una cifra fatti partire uno dopo l’altro, la partenza cadeva su fotogrammi diversi e a 350 pixel al secondo un fotogramma vale 6 pixel: le cifre si aprivano a ventaglio. Quelli che restano partono tutti insieme, il ritmo sfalsato resta alle righe, alle colonne e ai caratteri che entrano ed escono.
Le colonne che partivano sempre da sinistra si scontravano quando si stringevano: le parentesi di 2025 entravano in quelle di 2026. Ora parte prima la colonna davanti nel verso del movimento.
Un carattere che esce o cambia mentre è ancora fuori dalla sua finestra (un cambio dopo l’altro) passava visibile per il centro della casella: se è già fuori, si toglie subito.
Con l’asse del peso cambia anche la larghezza dei glifi, perfino nelle cifre tabellari: con le caselle misurate al peso normale, la riga sotto il puntatore sarebbe uscita dalla virgola. Le caselle si misurano una volta al peso più forte e il carattere sta centrato dentro.
La guida vermiglia passava sopra le intestazioni degli anni: parte da sotto le intestazioni e sta sotto le cifre nell’ordine di disegno.

Librerie

GSAP 3.15.0, Roboto Flex (font variabile, con gli assi della larghezza e del peso) 5.3.0.

Compressi con gzip, i tre file della demo pesano 13 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.