Il pulsante d’invio
Pulsanti, Transizioni, SVG
NuovaGratis
Tutti i componenti
La scelta dei posti
La sala di un cinema: il posto scelto fa un salto e il suo biglietto, col nome del posto, vola nel riepilogo su una curva mentre il totale conta; un posto lasciato richiama il suo biglietto, e gli altri si stringono restando nell’ordine dei posti.
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 seat picker</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/spline-sans@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the seat picker: a seat chosen jumps and its ticket flies down into the summary, the total counts, and a seat
let go calls its ticket back -->
<section class="hall" aria-labelledby="hall-title" data-hall data-autoclic>
<header class="hall__head">
<h2 class="hall__title" id="hall-title">Choose your seats</h2>
<p class="hall__when">Saltwater Hours · Sat 9:15 pm · Hall 2</p>
</header>
<div class="hall__screen" aria-hidden="true">
<svg viewBox="0 0 300 24" preserveAspectRatio="none"><path d="M6 20 Q150 -6 294 20"/></svg>
<span>Screen</span>
</div>
<div class="hall__seats" role="group" aria-label="Seats" data-seats></div>
<p class="hall__tip" aria-hidden="true" data-tip></p>
<div class="hall__key" aria-hidden="true">
<span><i class="seat seat--key"></i>Free</span>
<span><i class="seat seat--key is-taken"></i>Taken</span>
<span><i class="seat seat--key is-on"></i>Yours</span>
</div>
<div class="sum">
<div class="sum__left">
<p class="sum__label" id="sum-label">Your seats</p>
<ul class="sum__chips" aria-labelledby="sum-label" data-chips></ul>
<p class="sum__none" data-none>None yet</p>
</div>
<div class="sum__right">
<p class="sum__total" aria-live="polite"><span class="sr">Total </span><span data-total>€0</span></p>
<button class="sum__go" type="button" disabled data-go>Continue</button>
</div>
</div>
<p class="sr" aria-live="polite" data-live></p>
</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.
38 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 scelta dei posti» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero un riquadro scuro con Choose your seats e Saltwater Hours · Sat 9:15 pm · Hall 2; sotto, lo schermo (un arco chiaro che si disegna all’apertura) e sette file di poltrone, dalla A alla G, dieci per fila con un corridoio in mezzo: grigie le prime tre file, viola le altre, scure quelle già prese; poi la legenda e, in fondo, Your seats, il totale e Continue. Passando su una poltrona compare sopra di lei un’etichetta bianca con fila, numero e prezzo, che scivola da una poltrona all’altra. Scegliendone una, la poltrona diventa ambra con il suo nome, fa un salto, e il suo biglietto vola giù nel riepilogo lungo una curva mentre il totale conta fino al prezzo nuovo; lasciandola, il biglietto torna su nella poltrona, che lo accoglie con un piccolo inchino, e gli altri biglietti si stringono. I biglietti restano nell’ordine dei posti. Oltre i sei posti la poltrona trema e l’etichetta dice Up to 6 seats.
Come funziona
La sala
Le poltrone nascono dallo script: ROWS file di PER_ROW pulsanti, divisi a metà da un corridoio (una griglia con le colonne prese da due variabili CSS); i posti in TAKEN sono presi, e i prezzi sono PRICES[0] nelle prime tre file e PRICES[1] nelle altre. Ogni poltrona dice fila, numero e prezzo (aria-label) e se è scelta (aria-pressed).
Il volo del biglietto
Il biglietto nuovo entra subito nel riepilogo, nascosto, al suo posto nell’ordine dei posti; una copia parte dalla poltrona e va verso di lui, misurato a ogni fotogramma (gli altri biglietti possono spostarsi intanto): x con power2.inOut e y con un’altra ease disegnano una curva, e la copia passa dalla misura della poltrona a quella del biglietto in FLIGHT secondi. All’arrivo il biglietto vero compare con un piccolo rimbalzo.
Il ritorno e gli altri biglietti
Lasciando un posto, il suo biglietto vola indietro dal riepilogo alla poltrona, che lo prende scendendo a 0,82 e tornando con back.out; prima e dopo ogni cambio si misura dove sono gli altri biglietti, che scivolano ai loro posti nuovi (FLIP).
Il totale e il limite
Il totale va al valore nuovo in 0,5 secondi; Continue si accende col primo posto. Oltre MAX posti la poltrona trema (keyframes su x), e l’etichetta e una regione aria-live dicono il limite.
Tasti e anteprima
Le poltrone sono un solo arresto per il Tab: le frecce si muovono fra file e posti, Invio o spazio scelgono, e l’etichetta segue la focalizzazione. Un clic da script (l’anteprima della libreria) è una mano finta: indica una poltrona, la prende o la lascia, una alla volta, e finisce con la sala com’era.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
ROWS | script.js | 'ABCDEFG' | Le file, dallo schermo in fondo alla sala. |
PER_ROW | script.js | 10 | Le poltrone di una fila, divise dal corridoio a metà. |
TAKEN | script.js | ['A3', 'A4', 'B6', …] | I posti già presi. |
MAX | script.js | 6 | Quanti posti si possono scegliere. |
PRICES | script.js | [8, 10] | Il prezzo di un posto nelle prime tre file e nelle altre, in euro. |
FLIGHT | script.js | 0.55 | I secondi del volo di un biglietto fra la poltrona e il riepilogo. |
Quando usarla
Per scegliere i posti di un cinema, di un teatro, di un concerto, di un treno o di un aereo, i tavoli di un ristorante all’aperto, le postazioni di un ufficio.
Sul telefono
Le poltrone si stringono (22 pixel di altezza e spazi più piccoli) perché le dieci di una fila stiano nella larghezza; al tocco l’etichetta non compare, perché il dito la coprirebbe: la poltrona scelta porta il suo nome dentro di sé.
Con il movimento ridotto
Il posto scelto non salta, il biglietto compare nel riepilogo senza volare (e sparisce senza tornare indietro), il totale cambia di colpo, la poltrona di troppo non trema e lo schermo non si disegna.
Trappole
- Un biglietto che vola verso il suo posto nel riepilogo deve inseguirlo: se nel frattempo un altro biglietto entra prima di lui il posto si sposta, e la copia, misurata a ogni fotogramma, ci arriva lo stesso.
- Una griglia con repeat(var(--a), …) prende il numero dei posti da una variabile CSS: cambiando i posti per fila il CSS resta com’è, e al telefono cambiano solo le larghezze del corridoio e delle lettere.
- Settanta pulsanti sarebbero settanta arresti del Tab: ce n’è uno solo (un tabindex che si sposta) e le frecce per muoversi nella sala.
- Safari su iPhone dà la focalizzazione alla poltrona toccata: l’etichetta che segue la focalizzazione compare solo per chi usa i tasti, o resterebbe sopra le altre poltrone; al telefono il nome sta dentro la poltrona scelta.
Librerie
GSAP 3.15.0, Spline Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,5 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.
