La bacheca delle attività

Bacheche, Fisica, TransizioniGSAPImpegnativaPeso compresso: Demo 7,2 KBGSAP 28 KBGratisScarica lo zip

Tre colonne di schede da fare, in corso e fatte: una scheda presa si stacca e si inclina con la velocità della mano come se avesse un peso, e dove cadrebbe si apre un varco mentre le altre si scostano; lasciata, ci vola dentro e si assesta, e in Done si disegna la sua spunta.

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

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.

26 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 bacheca delle attività» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero tre colonne scure, To do, Doing e Done, coi loro conteggi; dentro, schede con un bordo colorato per la parte della casa (Rooms, Kitchen, Garden, Front desk): Fresh towels in room 4 e Order flour for Sunday, Paint the gate e Reply to the Berg family, Fix the shower in room 2 con la sua spunta verde. Prendendo una scheda col puntatore, o con un tocco lungo al telefono, si stacca un poco più grande, con un’ombra profonda, e segue la mano inclinandosi con la velocità; dove cadrebbe si apre un varco a righe e le altre schede scivolano via, nella sua colonna e in quella sopra cui si trova, che si schiarisce; i conteggi scorrono. Lasciata, vola nel varco, si assesta con un piccolo schiacciamento, e in Done salta fuori una spunta che si disegna; tolta da Done la perde.

Come funziona

La scheda staccata

Presa, la scheda passa su uno strato sopra la pagina (position fixed) esattamente dov’era, e al suo posto un varco della stessa altezza tiene lo spazio; cresce di LIFT.

Il peso

A ogni fotogramma la scheda segue la mano (x e y con GSAP) e la sua velocità di lato, addolcita, la inclina: rotation = velocità × TILT, fino a MAX_TILT gradi, anche questa addolcita, così ondeggia come una cosa che pesa.

Il varco

La colonna sotto la mano viene da elementFromPoint (lo strato lascia passare il puntatore), il posto dalla metà delle schede; il varco va lì, e le schede delle due colonne, misurate prima, scivolano dal vecchio posto al nuovo in SLIDE secondi.

L’atterraggio

Lasciata, la scheda vola nel varco (0,32 secondi, power3.out), prende il suo posto nell’elenco e si assesta con uno schiacciamento (scaleY da 0,94 a 1, elastic.out); in Done il quadratino della spunta salta fuori (back.out) e la spunta si disegna con stroke-dashoffset; i conteggi scorrono in su o in giù.

Tastiera, dito e anteprima

Spazio prende una scheda, le frecce la spostano fra colonne e posti (le altre scivolano), spazio la posa ed Esc la rimette dov’era; una regione aria-live dice dov’è. Al telefono la scheda si prende con un tocco lungo (0,3 secondi), così la pagina può ancora scorrere, e mentre la si porta la pagina sta ferma. Un clic da script (l’anteprima della libreria) porta una scheda lungo una curva in un’altra colonna; quattro spostamenti rimettono la bacheca com’era.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`TILT`	script.js	`0.015`	Quanto si inclina una scheda con la velocità della mano.
`MAX_TILT`	script.js	`9`	Quanto si inclina al massimo, in gradi.
`LIFT`	script.js	`1.04`	Quanto è più grande una scheda mentre la si porta.
`SLIDE`	script.js	`0.32`	I secondi in cui le altre schede fanno posto.
`COLUMNS`	script.js	`[['To do', [['Fresh towels in room 4', 'Rooms'], …]], …]`	Le colonne e le loro schede: parole e parte della casa (l’ultima colonna è quella delle cose fatte).

Provali nel Playground

Quando usarla

Per i compiti di una squadra, gli ordini di un ristorante, le pulizie delle camere, i lavori di un progetto, le candidature a un annuncio: ovunque le cose passano da uno stato all’altro.

Sul telefono

Le colonne vanno una sotto l’altra; una scheda si prende con un tocco lungo, così il dito può ancora scorrere la pagina, e mentre la si porta la pagina sta ferma.

Con il movimento ridotto

La scheda non si inclina e non cresce, atterra subito al suo posto senza volare né schiacciarsi, le altre si spostano senza scivolare e la spunta compare già fatta; il varco segue la mano come sempre.

Trappole

Una scheda che resta nella sua lista mentre la si trascina sposta tutte le altre: la si mette su uno strato sopra la pagina e al suo posto si lascia un varco della stessa altezza.
Lo strato non deve prendere il puntatore (pointer-events none), o elementFromPoint troverebbe sempre la scheda e mai la colonna sotto.
Rimessa nella lista, la scheda va riportata a zero anche per GSAP (x, y, rotation e scale) prima di togliere gli stili: GSAP ricorda gli ultimi valori e l’animazione dopo ripartirebbe da lì.
Col dito la pagina deve poter scorrere: la scheda si prende con un tocco lungo, e solo da lì touchmove si ferma (con un ascoltatore non passivo).

Librerie

GSAP 3.15.0, Epilogue (font variabile) 5.3.0.

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