Il menu che si apre dal pulsante
Menu, Transizioni, Testo
Gratis
Tutti i componenti
La lista delle cose da fare
Una lista di cose da fare con caselle vere: spuntandone una la casella scatta, si disegna la spunta, una riga attraversa le parole e il compito scivola giù fra quelli fatti, sollevato come se fosse portato, mentre gli altri salgono e la barra si riempie.
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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The to-do list</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/albert-sans@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the list: real checkboxes. Ticking a task, its box pops and a tick draws itself, a line is drawn through the
words and the task slides down among the ones done while the others move up; the bar on top fills. A task
can be added at the top or taken away with its cross -->
<section class="todo" aria-labelledby="todo-title" data-todo data-autoclic>
<div class="todo__head">
<h2 class="todo__title" id="todo-title"><span data-title>Before the guests arrive</span></h2>
<p class="todo__count" aria-live="polite"><span data-done>0</span> of <span data-all>0</span> done</p>
</div>
<div class="todo__bar" aria-hidden="true"><span data-bar></span></div>
<ul class="todo__list" data-list></ul>
<form class="todo__add" data-add>
<span class="todo__plus" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 6v12M6 12h12"/></svg></span>
<input class="todo__field" type="text" placeholder="Add a task" aria-label="Add a task" maxlength="60" autocomplete="off" enterkeyhint="done" data-field>
</form>
</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.
21 valori da cambiare
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 lista delle cose da fare» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero una scheda scura con il titolo Before the guests arrive, il conto 1 of 6 done, una barra corallo e sei compiti con le loro caselle, l’ultimo, Air the rooms, già fatto: casella corallo con la spunta e parole grigie barrate; in fondo, Add a task. Spuntando un compito la casella scatta con un rimbalzo e diventa corallo, la spunta si disegna, una riga attraversa le parole da sinistra e le parole si spengono; un momento dopo il compito scivola giù fra quelli fatti, sollevato e con un’ombra, mentre gli altri salgono a chiudere il vuoto. Il numero del conto scende al suo posto e la barra si allunga; fatti tutti, il titolo diventa All done e i compiti fanno una piccola onda. Togliendo la spunta il compito torna su al suo posto. Scrivendo in Add a task e premendo Invio il compito nuovo si apre in cima alla lista; la crocetta di un compito lo fa scivolare via a destra mentre gli altri salgono.
Come funziona
Caselle vere
Ogni compito ha un input checkbox vero, trasparente sopra la casella disegnata: lo spazio, gli screen reader e i moduli funzionano da soli. La spunta è un path con stroke-dasharray che si disegna e si cancella; la riga sulle parole è un elemento che si allunga con scaleX da sinistra e si ritira verso destra.
Il posto di ogni compito
L’ordine è sempre lo stesso: prima i compiti da fare come sono stati scritti, poi quelli fatti nell’ordine in cui sono stati fatti. Dopo SETTLE secondi lo script misura dove sono i compiti, li rimette nell’ordine giusto e fa scivolare ognuno dal posto di prima al nuovo in MOVE secondi, con power3.inOut.
Portato in braccio
Il compito spuntato si alza sopra gli altri (z-index), cresce del 3 per cento e prende un’ombra a metà strada, poi torna giù quando arriva. Una scivolata ancora in corso conta nella misura, così un compito spuntato due volte di fila non salta.
Il conto, la barra e il titolo
Il numero dei fatti scende al suo posto con back.out, la barra si allunga con scaleX fino alla parte fatta, e quando sono tutti fatti il titolo rotola in All done e i compiti fanno un’onda di 6 pixel, uno dopo l’altro.
Aggiungere, togliere, anteprima
Un compito nuovo entra in cima e si apre da altezza zero; la crocetta (visibile al passaggio del mouse, sempre col dito) lo fa scivolare via e richiude il suo posto, e il fuoco passa alla crocetta dopo. Un clic da script sulla scheda (l’anteprima della libreria) spunta il primo compito da fare; con tutti fatti, li toglie tutti.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TASKS | script.js | ['Air the rooms', 'Make the beds', …] | I compiti all’apertura della pagina. |
START_DONE | script.js | 1 | Quanti di loro sono già fatti. |
SETTLE | script.js | 0.35 | La pausa fra la spunta e la scivolata del compito, in secondi. |
MOVE | script.js | 0.6 | I secondi in cui un compito scivola al suo posto. |
Quando usarla
Per una lista di cose da fare, i passi di una preparazione o di un viaggio, le pulizie di una struttura fra un ospite e l’altro, le attività di un progetto: ovunque si spunta qualcosa.
Sul telefono
La scheda prende la larghezza dello schermo meno un margine e i nomi lunghi finiscono coi tre puntini; le crocette restano sempre visibili, perché senza mouse non c’è il passaggio sopra, e il campo per aggiungere ha un testo di 16 pixel, così la pagina non si ingrandisce toccandolo.
Con il movimento ridotto
La casella e la spunta cambiano senza scattare e i compiti vanno subito al loro posto, senza scivolare; niente onda alla fine, e il titolo cambia di colpo.
Trappole
- Spostare un elemento nella lista lo fa saltare: lo script misura prima dove si trova ogni compito, lo sposta nel DOM e poi lo fa scivolare dalla differenza fra il posto vecchio e il nuovo.
- Un compito che sta ancora scivolando va misurato insieme alla sua scivolata (gsap.getProperty della y): misurato senza, ripartirebbe da un posto sbagliato.
- Un compito nuovo va messo in cima prima delle misure: misurato quando non è ancora nella pagina, il suo posto di partenza sarebbe zero e attraverserebbe tutta la lista.
- Togliendo un compito col fuoco sulla sua crocetta, il fuoco andrebbe perso: passa alla crocetta del compito accanto, o al campo per aggiungere.
Librerie
GSAP 3.15.0, Albert Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,4 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.
