Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
L’iscrizione alla lista d’attesa
La lista d’attesa di un’app per il calendario, con la fila disegnata: 2.480 tacche grigie sottili su un canvas, una per ogni persona che aspetta. Iscrivendoti, la tua tacca verde cade in fondo alla fila, le vicine sentono l’arrivo una dopo l’altra e una lente a occhio di pesce si apre sopra il tuo posto, col numero che rotola cifra per cifra. Ogni amico che si iscrive col tuo link ti fa salire di dieci posti: le tacche davanti fanno un passo indietro e la tua scivola avanti.
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 waitlist with the queue</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the waitlist of a calendar app: every person waiting is a thin mark in the queue. Joining, your mark drops
in at the end and a lens opens over it; every friend who joins with your link moves you up. Joining is
pretended: see post() in the script -->
<div class="wait" data-wait data-autoclic>
<h2 class="wait__title" id="wait-title">Halden is almost here</h2>
<p class="wait__sub">A calmer calendar. The first invites go out in November.</p>
<div class="queue" data-queue>
<canvas class="queue__canvas" aria-hidden="true" data-canvas></canvas>
<span class="queue__you" aria-hidden="true" data-you><span>You</span></span>
</div>
<p class="wait__count" data-count><span data-count-text>2,480 people are waiting.</span></p>
<form class="wait__form" action="#" novalidate aria-labelledby="wait-title" data-form>
<div class="wait__row">
<div class="wait__field" data-field>
<label class="sr" for="wait-email">Your email</label>
<input class="wait__input" id="wait-email" name="email" type="text" inputmode="email" autocomplete="email" autocapitalize="off" autocorrect="off" spellcheck="false" enterkeyhint="send" maxlength="254" placeholder="you@example.com" aria-describedby="wait-status" aria-invalid="false" data-input>
<span class="wait__caret" aria-hidden="true" data-caret></span>
</div>
<button class="join" type="submit" data-join>
<span class="join__bg" aria-hidden="true"></span>
<span class="join__label" data-join-label>Join the waitlist</span>
</button>
</div>
<p class="wait__status" id="wait-status" data-status><span class="status__line">One email when your invite is ready. Nothing else.</span></p>
</form>
<p class="sr" role="status" aria-live="polite" data-live></p>
</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.
22 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 «L’iscrizione alla lista d’attesa» da Animorio e adattala al mio sitoCosa fa
Su una pagina bianca il titolo Halden is almost here e sotto A calmer calendar. The first invites go out in November. Più giù un rettangolo fitto di tacche grigie verticali, che entrano riga dopo riga dall’alto a sinistra, con sotto 2,480 people are waiting.; poi il campo you@example.com e la pillola nera Join the waitlist, e la riga One email when your invite is ready. Nothing else. Premendo il pulsante con un’email sbagliata il campo prende un bordo verde, fa un piccolo scatto di lato e la riga dice cosa manca (The email needs its ending, like .com.). Con un’email giusta il pulsante dice Joining, poi On the list, il campo si chiude in grigio chiaro; in fondo alla fila cade una tacca verde, le tacche vicine sobbalzano una dopo l’altra, e sopra di lei si apre una lente: le tacche intorno si allargano e si allungano a raggiera come viste da vicino, e sopra la tacca verde compare l’etichetta You. Sotto si legge Your place in line: 2,481 in verde, e Copy your link · Use another email. Copiato il link, poco dopo un amico si iscrive: una tacca nuova compare in fondo, le dieci tacche davanti alla tua scivolano indietro di un posto, la tua scivola avanti di dieci con la lente che la segue, e il numero rotola a 2,471. Use another email chiude la lente, la tacca verde se ne va e la fila si ricompone.
Come funziona
Una fila di 2.480 tacche
Ogni persona è un oggetto con un posto nella fila (un numero che può stare fra due posti mentre si muove), un sobbalzo e una trasparenza. Il posto diventa una casella di una griglia di ROWS righe, da sinistra a destra e dall’alto in basso, con un margine sopra e sotto perché la lente non finisca tagliata. Tutte le tacche si disegnano su un canvas con la densità dello schermo, una fillRect per tacca; il disegno gira sul ticker di GSAP solo per i secondi che un cambiamento chiede, poi si ferma.
La lente a occhio di pesce
Dentro REACH pixel dal tuo posto, un punto a distanza r viene spinto a (d + 1) r / (d r / REACH + 1): al centro tutto è d + 1 volte più grande e al bordo la lente incontra la fila piatta senza salti. Il fattore di ingrandimento di ogni tacca la fa anche più larga, più lunga e più scura. GSAP porta d da 0 a LENS e sposta il centro della lente insieme al tuo posto.
L’arrivo in fondo alla fila
La tua tacca cade da 44 pixel con power2.in e, all’atterraggio, le tacche della stessa riga entro sette posti ricevono un sobbalzo che torna con elastic.out, sfalsato con la distanza: le vicine sentono il colpo per prime. L’etichetta You è un elemento HTML che il disegno mette sopra la tacca a ogni fotogramma.
Salire di posto
Quando un amico si iscrive (friendJoined(), nella demo finto dopo che hai copiato il link) una tacca nuova si accende in fondo, le BOOST tacche davanti alla tua scivolano di un posto indietro, sfalsate, e la tua scivola avanti di BOOST posti con la lente che la segue; il numero del tuo posto rotola solo nelle cifre che cambiano, ognuna nella sua finestra larga fissa.
Il campo e l’invio
Il campo email è vero, con label, aria-invalid e aria-describedby alla riga sotto, che dice cosa manca in parole semplici. L’iscrizione è finta (post(), WAIT secondi); i messaggi arrivano anche ai lettori di schermo con una regione aria-live. Use another email rimette la fila com’era: le tacche che ti avevano fatto posto tornano avanti.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
AHEAD | script.js | 2480 | Quante persone sono già in fila. |
ROWS | script.js | 16 | In quante righe si disegna la fila. |
LENS | script.js | 3.2 | Quanto ingrandisce la lente: il centro è 1 + LENS volte più grande. |
REACH | script.js | 64 | Il raggio della lente, in pixel. |
BOOST | script.js | 10 | Di quanti posti ti fa salire un amico che si iscrive. |
WAIT | script.js | 0.7 | Quanti secondi dura l’iscrizione finta. |
FRIEND | script.js | 1.8 | Nella demo, i secondi fra la copia del link e l’amico che si iscrive. |
Quando usarla
Nella pagina di lancio di un’app o di un prodotto che non c’è ancora, dove la lista d’attesa è l’unica cosa da fare: la fila disegnata dice quanta gente aspetta meglio di un numero, e la lente fa sentire chi si iscrive una persona fra le altre. Il link d’invito che fa salire di posto è il motore del passaparola.
Sul telefono
Il blocco prende la larghezza dello schermo; la fila si stringe (le tacche diventano più fitte, le stesse 2.480) e il pulsante va sotto il campo, largo quanto lui. Il campo apre la tastiera per le email e il tasto Invio dice Send; Copy your link e Use another email si toccano come pulsanti.
Con il movimento ridotto
La fila compare intera, senza riempirsi; la tacca verde non cade e le vicine non sobbalzano: compare in dissolvenza con la lente già aperta. Salendo di posto, la tacca e la lente sono subito al posto nuovo e il numero cambia senza rotolare.
Trappole
- La tua tacca è sempre l’ultima, quindi nell’ultima riga: la lente finiva tagliata dal bordo del canvas. Ora la griglia ha un margine sopra e sotto; la lente resta una cupola, perché dietro di te non c’è nessuno.
- Mentre una cifra rotolava, quella vecchia usciva dal flusso e quella nuova era ancora in posizione assoluta: per un attimo la finestra della cifra era larga zero e si leggeva 2,41. Ora la larghezza della finestra si fissa prima del rotolamento.
- Con 20 righe di tacche alte 3 pixel e grigio chiaro, la fila sembrava una trama e non delle persone: ora sono 16 righe, tacche più alte e un grigio più scuro.
Librerie
GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,6 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 19 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Da fare
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.
