La tabella che si riordina

Tabelle, Transizioni, TestoGSAPMediaPeso compresso: Demo 4,8 KBGSAP 28 KBGratisScarica lo zip

Una tabella di prenotazioni: cliccando l’intestazione di una colonna le righe viaggiano insieme verso il nuovo ordine, ognuna su una piccola curva, quelle che salgono da una parte e quelle che scendono dall’altra, la freccia gira con un rimbalzo e la colonna scelta si colora.

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 that sorts itself</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/reddit-sans@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the table that sorts itself: a column clicked sorts the rows, which travel to their new places along small
         curves, those going up on one side and those going down on the other -->
    <div class="sheet" data-sheet data-autoclic>
      <table class="table">
        <caption class="table__caption">
          <span class="table__title">Bookings this month</span>
          <span class="table__note">Click a column to sort it</span>
        </caption>
        <thead>
          <tr data-head></tr>
        </thead>
        <tbody data-rows></tbody>
      </table>
    </div>
  </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.

37 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 che si riordina» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco Bookings this month e Click a column to sort it; una tabella con Guest, Room, Nights e Total: sei ospiti (Marta Silva, Jonas Berg, Aiko Tanaka, Lucía Ferrer, Tom Whitaker, Elif Kaya), la camera in un’etichetta colorata (Garden, Tower, Loft), le notti e il totale in euro con dietro una barra lilla lunga quanto la sua parte del totale più alto, che cresce all’apertura della pagina. Cliccando un’intestazione le righe viaggiano tutte insieme verso il nuovo ordine, ognuna su una piccola curva di lato (in su da una parte, in giù dall’altra), quelle che vanno più lontano un attimo dopo; l’intestazione diventa lilla con una freccia, che gira con un rimbalzo quando l’ordine si rovescia (cliccando di nuovo), e le celle della colonna prendono una velatura lilla.

Come funziona

Dove sono, dove vanno

Prima di ordinare, lo script misura dove sta ogni riga (togliendo un viaggio ancora in corso); poi ordina i dati (i numeri per valore, le parole con localeCompare, a parità per nome) e rimette le righe nel nuovo ordine: ogni riga è già al suo posto nuovo, e una trasformazione la riporta a quello vecchio.

La curva

Ogni riga va dal vecchio posto al nuovo su una piccola curva: y dalla differenza a zero, x come sin(π·t) × SWAY, dalla parte della sua direzione; in MOVE secondi (un po’ di più per un viaggio lungo), con power3.inOut, e le righe che vanno più lontano partono STAGGER secondi l’una dopo l’altra.

La freccia e la colonna

L’intestazione scelta prende aria-sort (ascending o descending), il suo colore e la freccia; rovesciando l’ordine la freccia gira di 180 gradi con back.out; le celle di quella colonna prendono una velatura lilla (una classe con una transizione dello sfondo).

Le barre

Dietro ogni totale una barra lunga quanto la sua parte del più alto, misurata sulla larghezza della sua cella (così non copre mai la colonna accanto), che all’apertura cresce da destra con scaleX.

Tastiera e anteprima

Le intestazioni sono pulsanti nelle loro celle, quindi funzionano coi tasti, e una regione aria-live dice l’ordine (per esempio highest first). Le parole si ordinano prima dalla A alla Z, i numeri prima dal più alto. Un clic da script (l’anteprima della libreria) ordina per una colonna dopo l’altra.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`MOVE`	script.js	`0.6`	I secondi del viaggio di una riga verso il suo posto nuovo.
`SWAY`	script.js	`14`	Di quanti pixel una riga si scosta di lato mentre viaggia.
`STAGGER`	script.js	`0.025`	I secondi fra la partenza di una riga e della successiva.
`BOOKINGS`	script.js	`[['Marta Silva', 'Garden', 3, 360], …]`	Le prenotazioni: ospite, camera, notti e totale in euro.

Provali nel Playground

Quando usarla

Per le prenotazioni di una struttura, i prodotti di un negozio, i risultati di una gara, le fatture di un mese, una classifica: ogni tabella che si legge meglio in un altro ordine.

Sul telefono

Le quattro colonne restano: il testo scende a 14 pixel, le celle si stringono e le barre restano dentro la loro cella.

Con il movimento ridotto

Le righe vanno subito al loro posto nuovo, senza viaggio, la freccia si gira di colpo e le barre ci sono già.

Trappole

Una riga che cambia posto nel corpo della tabella salta: si misura prima e dopo e la si porta da un posto all’altro con una trasformazione, che sulle righe di una tabella funziona (top e left no).
Se un riordino arriva mentre le righe viaggiano, la misura di partenza deve togliere la y del viaggio in corso, o la riga ripartirebbe da un posto sbagliato.
Una barra larga in pixel fissi esce dalla sua cella su uno schermo stretto e copre la colonna accanto: la sua larghezza è una parte della cella (calc).
Le cifre stanno in colonna solo con font-variant-numeric: tabular-nums.

Librerie

GSAP 3.15.0, Reddit Sans (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 4,8 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 3 ottobre 2026

Computer: Fatto
Telefono: Fatto
Movimento ridotto: Fatto
Safari su iPhone: Fatto

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.