The menu that opens from its button
Menus, Transitions, Text
Free
All components
The table that sorts itself
A table of bookings: clicking a column’s head the rows travel together to the new order, each along a small curve, those going up leaning one way and those going down the other, the arrow turns round with a bounce and the column chosen takes a colour.
The code
A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.
<!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
Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.
37 values to change
Or ask Claude Code for it
With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:
Take “The table that sorts itself” from Animorio and fit it into my siteWhat it does
On a white background Bookings this month and Click a column to sort it; a table with Guest, Room, Nights and Total: six guests (Marta Silva, Jonas Berg, Aiko Tanaka, Lucía Ferrer, Tom Whitaker, Elif Kaya), the room in a coloured label (Garden, Tower, Loft), the nights and the total in euros with a lilac bar behind it as long as its share of the largest total, growing when the page opens. Clicking a head the rows travel all together to the new order, each along a small curve sideways (up one way, down the other), the ones going furthest a moment later; the head turns lilac with an arrow, which turns round with a bounce when the order is reversed (clicking again), and the column’s cells take a lilac wash.
How it works
Where they are, where they go
Before sorting, the script measures where every row is (taking away a trip still going); then it sorts the data (numbers by value, words with localeCompare, ties by name) and puts the rows back in the new order: every row is already in its new place, and a transform takes it back to the old one.
The curve
Every row goes from its old place to the new one along a small curve: y from the difference to zero, x as sin(π·t) × SWAY, on the side of its direction; in MOVE seconds (a little more for a long trip), with power3.inOut, and the rows going further set off STAGGER seconds one after another.
The arrow and the column
The head chosen takes aria-sort (ascending or descending), its colour and the arrow; reversing the order the arrow turns 180 degrees with back.out; that column’s cells take a lilac wash (a class with a background transition).
The bars
Behind every total a bar as long as its share of the largest, measured on the width of its own cell (so it never covers the next column), which grows from the right with scaleX when the page opens.
Keys and the preview
The heads are buttons in their cells, so they work with the keys, and an aria-live region says the order (highest first, for one). Words sort from A to Z first, numbers from the highest first. A click from a script (the library’s preview) sorts by one column after another.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
MOVE | script.js | 0.6 | The seconds of a row’s trip to its new place. |
SWAY | script.js | 14 | How far, in pixels, a row leans out of the way as it travels. |
STAGGER | script.js | 0.025 | The seconds between one row setting off and the next. |
BOOKINGS | script.js | [['Marta Silva', 'Garden', 3, 360], …] | The bookings: guest, room, nights and total in euros. |
When to use it
For a guesthouse’s bookings, a shop’s products, the results of a race, a month’s invoices, a league table: any table that reads better in another order.
On phones
The four columns stay: the type goes down to 14 pixels, the cells narrow and the bars stay inside their cells.
With reduced motion
The rows go straight to their new places, without the trip, the arrow turns round at once and the bars are already there.
Pitfalls
- A row changing its place in the body of the table jumps: it is measured before and after and taken from one place to the other with a transform, which works on table rows (top and left do not).
- If a new sort comes while the rows are travelling, the measure they start from must take away the y of the trip still going, or the row would set off from the wrong place.
- A bar with a fixed width in pixels leaves its cell on a narrow screen and covers the next column: its width is a share of the cell (calc).
- The figures line up in columns only with font-variant-numeric: tabular-nums.
Libraries
GSAP 3.15.0, Reddit Sans (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 4.8 KB; the libraries: GSAP 28 KB.
Testing
Tested on 3 October 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: Done
License
Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.
