The task board

Boards, Physics, TransitionsGSAPAdvancedCompressed weight: Demo 7.2 KBGSAP 28 KBFreeDownload the zip

Three columns of cards to do, doing and done: a card picked up comes away and tilts with the speed of the hand as if it had weight, and where it would land a gap opens while the others move aside; let go, it flies into it and settles, and in Done its tick draws itself.

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.

Download the zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The task board</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/epilogue@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the task board: three columns of cards. A card picked up tilts with the speed of the hand, a gap opens
         where it would land and the other cards slide to make room; dropped, it settles in its place, and in Done
         it gets its tick -->
    <section class="board" aria-label="Tasks for the weekend" data-board data-autoclic></section>
    <p class="sr" id="board-help">Press space to pick a card up, the arrows to move it, space again to put it down, escape to put it back.</p>
    <p class="sr" aria-live="assertive" data-live></p>
  </main>
  <div class="layer" aria-hidden="true" data-layer></div>

  <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.

26 values to change

Open the Playground

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 task board” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On a black background three dark columns, To do, Doing and Done, with their counts; in them, cards with a coloured edge for their part of the house (Rooms, Kitchen, Garden, Front desk): Fresh towels in room 4 and Order flour for Sunday, Paint the gate and Reply to the Berg family, Fix the shower in room 2 with its green tick. Taking a card with the pointer, or with a long press on a phone, it comes away a little bigger, with a deep shadow, and follows the hand tilting with its speed; where it would land a striped gap opens and the other cards slide away, in its column and in the one it is over, which lightens; the counts roll. Let go, it flies into the gap, settles with a small squash, and in Done a tick pops out and draws itself; taken out of Done it loses it.

How it works

The card that comes away

Picked up, the card moves onto a layer over the page (position fixed) exactly where it was, and in its place a gap of the same height keeps the space; it grows by LIFT.

The weight

On every frame the card follows the hand (x and y with GSAP) and its sideways speed, smoothed, tilts it: rotation = speed × TILT, up to MAX_TILT degrees, smoothed too, so it sways like something with weight.

The gap

The column under the hand comes from elementFromPoint (the layer lets the pointer through), the place from the middle of the cards; the gap goes there, and the cards of the two columns, measured before, slide from their old places to the new ones in SLIDE seconds.

The landing

Let go, the card flies into the gap (0.32 seconds, power3.out), takes its place in the list and settles with a squash (scaleY from 0.94 to 1, elastic.out); in Done the tick’s little square pops out (back.out) and the tick draws itself with stroke-dashoffset; the counts roll up or down.

Keys, fingers and the preview

Space picks a card up, the arrows move it between columns and places (the others slide), space puts it down and Esc puts it back where it was; an aria-live region says where it is. On a phone the card is picked up with a long press (0.3 seconds), so the page can still scroll, and while it is carried the page stays still. A click from a script (the library’s preview) carries a card along a curve into another column; four moves bring the board back as it was.

Values to change

Name	File	Default	What it changes
`TILT`	script.js	`0.015`	How much a card tilts with the speed of the hand.
`MAX_TILT`	script.js	`9`	The most it tilts, in degrees.
`LIFT`	script.js	`1.04`	How much bigger a card is while it is carried.
`SLIDE`	script.js	`0.32`	The seconds the other cards take to make room.
`COLUMNS`	script.js	`[['To do', [['Fresh towels in room 4', 'Rooms'], …]], …]`	The columns and their cards: words and part of the house (the last column is the one of things done).

Try them in the Playground

When to use it

For a team’s tasks, a restaurant’s orders, the cleaning of the rooms, the work on a project, the applications to a job: anywhere things go from one state to the next.

On phones

The columns go one under the other; a card is picked up with a long press, so the finger can still scroll the page, and while it is carried the page stays still.

With reduced motion

The card does not tilt or grow, it lands in its place at once without flying or squashing, the others move without sliding and the tick appears already drawn; the gap follows the hand as always.

Pitfalls

A card left in its list while it is dragged moves all the others: it goes onto a layer over the page and a gap of the same height is left in its place.
The layer must not take the pointer (pointer-events none), or elementFromPoint would always find the card and never the column under it.
Put back in the list, the card has to be set back to zero for GSAP too (x, y, rotation and scale) before its styles go: GSAP remembers the last values and the next animation would start from there.
With a finger the page must still scroll: the card is picked up with a long press, and only from then on is touchmove stopped (with a listener that is not passive).

Libraries

GSAP 3.15.0, Epilogue (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 7.2 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.