Il menu che si apre dal pulsante
Menu, Transizioni, Testo
Gratis
Tutti i componenti
Il select a rullo sottile
Un select nello stile minimal, tutto su una riga sottile: la scritta Ship to, il paese scelto e i giorni di consegna. Aperto, gli altri paesi si srotolano sopra e sotto il valore come le facce di un tamburo, più piccoli e leggeri man mano che si girano; quello in mezzo prende peso e larghezza. Si gira con la rotella, col dito o coi tasti; scegliendo, il tamburo si richiude sul paese e il valore nuovo atterra sulla riga un pixel troppo in basso, poi si posa.
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 thin drum select</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- a select on a thin line. Opened, the options roll out above and below the value like the faces of a drum;
the one in the middle gains weight, and choosing rolls the drum shut on it. The options are drawn by the
script from the list below -->
<div class="frame" data-frame>
<div class="sel" data-select>
<span class="sel__label" id="sel-label">Ship to</span>
<button class="sel__field" type="button" role="combobox" aria-haspopup="listbox" aria-expanded="false"
aria-controls="sel-list" aria-labelledby="sel-label sel-value" data-field>
<span class="sel__value" id="sel-value"><span class="sel__value-in" data-value>Italy</span></span>
</button>
<span class="sel__days" aria-hidden="true"><span class="sel__days-in" data-days>2–3 days</span></span>
<svg class="sel__chev" viewBox="0 0 14 14" aria-hidden="true"><path d="M3 5.5 7 9.5 11 5.5" /></svg>
<div class="sel__drum" id="sel-list" role="listbox" aria-labelledby="sel-label" data-drum hidden>
<div class="sel__roll" data-roll></div>
</div>
<span class="sel__band sel__band--top" aria-hidden="true"></span>
<span class="sel__band sel__band--bottom" aria-hidden="true"></span>
<span class="sel__line" aria-hidden="true" data-line></span>
<span class="sel__ink" aria-hidden="true" data-ink></span>
</div>
</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.
17 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 «Il select a rullo sottile» da Animorio e adattala al mio sitoCosa fa
Su una pagina bianca c'è un select largo al massimo 380 pixel e alto 60, tutto su una riga nera sottile: a sinistra la scritta Ship to in maiuscolo grigio, poi il paese scelto (Italy) in un grotesk pieno, a destra i giorni di consegna (2–3 days) e una freccia sottile. Premendolo, la freccia si gira, una linea vermiglia si disegna sulla riga da sinistra a destra e gli altri paesi si srotolano sopra e sotto il valore come le facce di un tamburo, con una molla che passa appena oltre e torna: quelli vicini sono larghi e quasi neri, quelli lontani più stretti, leggeri e chiari, piegati all'indietro sulla curva. Due righe grigie sottilissime chiudono la faccia in mezzo, che è sempre la più spessa e la più larga: girando il tamburo, ogni paese prende peso e larghezza entrando nel mezzo e li perde uscendo, e i giorni di consegna a destra cambiano scorrendo nella loro fessura. Il tamburo si gira con la rotella, una faccia alla volta; col trascinamento, del mouse o del dito, e lanciato si ferma da solo su una faccia; coi tasti freccia, Pagina su e giù, Inizio e Fine, e scrivendo le prime lettere di un paese. Un clic su un paese lo porta nel mezzo, un clic su quello in mezzo lo sceglie. Scegliendo, il tamburo si richiude sul paese, la linea vermiglia si ritira verso destra e il valore nuovo cade sulla riga, scende di un pixel troppo e si posa. Esc o un clic fuori chiudono senza cambiare. Mentre nessuno lo tocca, il select si apre, gira e sceglie da solo.
Come funziona
Il tamburo in CSS 3D
Ogni paese è una faccia girata di STEP gradi per la sua distanza dal mezzo (rotateX) e spinta fuori del raggio del tamburo (translateZ); il rullo è spinto indietro dello stesso raggio, così la faccia in mezzo resta esattamente dove sta il valore del campo. Il raggio si calcola dall'altezza di una faccia perché due facce vicine si tocchino; quelle girate oltre 89 gradi non si disegnano.
Peso e larghezza dalla distanza
A ogni fotogramma ogni faccia riceve il suo font-variation-settings: wght da LIGHT a HEAVY e wdth da 84 a 100 secondo quanto è vicina al mezzo, e un'opacità che segue il coseno dell'angolo. La faccia in mezzo ha lo stesso carattere del valore del campo: aprendo, il valore si nasconde dietro di lei senza che si veda il cambio.
Una molla per girare
La posizione del tamburo è un numero con i decimali che una molla tira verso la faccia giusta (SPRING e DAMP, col passo di tempo tenuto sotto 1/30 di secondo). Il trascinamento la tiene in mano, oltre le estremità cede sempre meno; lasciato, si sceglie la faccia dove si fermerebbe con la velocità che aveva e la molla ce lo porta.
Aprire e chiudere
L'apertura è un solo numero da 0 a 1 che moltiplica gli angoli: a 0 tutte le facce sono schiacciate dietro al valore, a 1 il tamburo è aperto; GSAP lo porta su con back.out, che passa appena oltre. Chiudendo torna a 0 mentre il tamburo arriva sulla faccia scelta, poi il valore nuovo cade sulla riga di LAND pixel troppo e si posa.
Un select vero
Il campo è un button con role combobox, aria-expanded, aria-controls e aria-activedescendant; la lista è un listbox di option con aria-selected. Il focus resta sempre sul campo: frecce, Pagina su e giù, Inizio e Fine girano il tamburo, Invio e Spazio scelgono, Tab sceglie e passa oltre, Esc chiude senza cambiare, le lettere scritte di seguito cercano il paese.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
START | script.js | 6 | Il paese scelto quando la pagina si apre, col suo posto nella lista. |
STEP | script.js | 22 | I gradi fra due facce del tamburo: meno gradi, un tamburo più grande con più paesi in vista. |
SPRING | script.js | 190 | Quanto forte la molla tira il tamburo sulla sua faccia. |
DAMP | script.js | 21 | Quanto la molla trattiene il tamburo: meno, e passa oltre di più. |
OPEN_TIME | script.js | 0.6 | I secondi che il tamburo impiega a srotolarsi. |
CLOSE_TIME | script.js | 0.34 | I secondi che il tamburo impiega a richiudersi. |
LAND | script.js | 1 | Di quanti pixel il valore nuovo atterra troppo in basso prima di posarsi. |
HEAVY | script.js | 760 | Il peso della faccia in mezzo. |
LIGHT | script.js | 330 | Il peso delle facce più lontane. |
Quando usarla
Per un select con tante voci corte in un modulo pulito: il paese della spedizione alla cassa di un negozio, la taglia, la lingua, il fuso orario, la categoria di una richiesta.
Sul telefono
Col dito il tamburo si trascina e si lancia; sotto i 420 pixel il carattere scende a 20 pixel e i giorni di consegna si nascondono, per lasciare spazio ai nomi lunghi.
Con il movimento ridotto
Niente rotazioni né molle: aperto, i paesi stanno in una colonna piatta che sfuma verso l'alto e verso il basso e compare in dissolvenza; il tamburo salta subito sulla faccia giusta e il valore nuovo non cade.
Trappole
- La faccia in mezzo e il valore del campo devono avere lo stesso carattere, la stessa misura e la stessa posizione al pixel: altrimenti aprendo si vede un salto. Il tamburo parte dal bordo sinistro del campo, misurato con offsetLeft a ogni resize.
- Chiudendo, la molla e il tween di GSAP muovono lo stesso numero: la molla ha già come obiettivo la faccia scelta, così vanno d'accordo.
- Il focus resta sempre sul campo (il trascinamento lo rimette lì): un listbox che prende il focus farebbe chiudere il select al blur.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,8 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 22 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.
