Il pulsante che copia
Pulsanti, Testo, SVG, Fisica
NuovaGratis
Tutti i componenti
La scelta della taglia
Un selettore della taglia nello stile minimal, dove la larghezza delle lettere è la taglia: XS stretta, XL larga, sull’asse wdth di un carattere variabile. La taglia scelta si allarga ancora e prende peso mentre una cornice vermiglia sottile la raggiunge su due molle, un lato dopo l’altro; sotto, le misure cambiano parola per parola e una taglia esaurita è barrata da una linea che si disegna.
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 size picker</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the size picker of a clothes shop, in the minimal style: five real radio buttons, XS to XL, where the width of
the letters is the size. Each size is set on the width axis of a variable face, from condensed to extended;
the one chosen widens a little more and takes weight while a hairline frame catches up with it on two springs,
one per side. The line under it says the measures and changes word by word. A sold-out size is struck through
by a thin line that draws itself. The frame, the strike and the ruler are one SVG drawn by the script -->
<form class="size" data-size onsubmit="return false">
<fieldset class="size__set" data-set data-autoclic>
<legend class="size__legend">Size</legend>
<p class="size__head" aria-hidden="true" data-head></p>
<div class="size__row" data-row>
<svg class="size__lines" aria-hidden="true" data-lines>
<path class="size__ruler" data-ruler/>
<path class="size__strike" pathLength="1" data-strike/>
<path class="size__frame" pathLength="1" data-frame/>
</svg>
</div>
<p class="size__line" aria-hidden="true" data-line></p>
<p class="size__status" aria-live="polite" data-status></p>
</fieldset>
</form>
</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.
41 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 della taglia» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco, in alto una riga piccola grigia, «Size · Medium»; sotto, le cinque taglie XS, S, M, L e XL in un carattere grottesco variabile, ognuna larga quanto è grande: XS strettissima, quasi compressa, XL distesa e larga. La taglia scelta è nera e pesante, chiusa in una cornice sottile vermiglia; le altre sono leggere. XS è esaurita: grigio chiaro, con una linea sottile che la attraversa da un angolo all’altro. Sotto le taglie un righello a filo segna con una tacca dove comincia e dove finisce ogni casella, e sotto ancora una riga dice le misure: «Chest 96 cm · Length 70 cm · Fits true to size». Scegliendo un’altra taglia la vecchia torna leggera e stretta, la nuova si allarga e prende peso andando un poco oltre e tornando, e la cornice la raggiunge su due molle: il lato verso cui va parte per primo, l’altro lo segue, e la cornice si assottiglia di un pixel mentre si allunga. Le taglie vicine si spostano per farle posto, e anche il righello. Nella riga sotto cambiano solo le parole che cambiano (le cifre), lettera per lettera, dal basso se la taglia cresce e dall’alto se cala; sopra, il nome della taglia fa lo stesso. Passando sopra XS, o toccandola, la linea che la barra si cancella e si ridisegna e la riga dice «XS is sold out · back in stock soon».
Come funziona
La larghezza è la taglia
Le taglie sono scritte in Anybody, un carattere variabile con l’asse wdth da 50 (compressissimo) a 150 (larghissimo). Lo script dà a ogni taglia un valore lungo la scala, da NARROW per la più piccola a WIDE per la più grande, e lo scrive in font-variation-settings insieme al peso: così la riga stessa dice quanto è grande ogni taglia. La scelta aggiunge GROW alla larghezza e passa da LIGHT a BOLD, con un passo di troppo e il ritorno con elastic.out.
Una cornice che insegue un bersaglio che si muove
Mentre le lettere cambiano larghezza le caselle cambiano misura e si spostano: lo script misura la casella scelta a ogni fotogramma (offsetLeft e offsetWidth) e la cornice ci arriva su due molle smorzate, una per lato, integrate a passi di 1/240 di secondo col passo limitato a 1/30. Il lato verso cui si va ha la molla più rapida, l’altro è più lento del 36 per cento: la cornice si allunga e poi si richiude, con lo smorzamento SPRING[1] sotto 1 che dà l’overshoot di un pixel. Allungata più della sua casella si assottiglia di qualche decimo di pixel, come un elastico.
Un SVG solo per cornice, barra e righello
Cornice, barra della taglia esaurita e righello sono tre path di un SVG sopra la riga, ridisegnati dalle misure delle caselle. Cornice e barra hanno pathLength 1 e stroke-dasharray 1 1, così si disegnano con un solo numero (stroke-dashoffset da 1 a 0) qualunque sia la loro lunghezza. Il ciclo gira sul ticker di GSAP solo finché qualcosa si muove: quando le molle sono ferme e non ci sono tween in corso si toglie da solo.
Cambiano solo le parole che cambiano
Le due righe di testo sono fatte di caselle, una per parola, larghe quanto la parola. Al cambio si confronta parola per parola: quelle uguali restano ferme, nelle altre le lettere vecchie escono una dopo l’altra e le nuove entrano con back.out, dal basso se la taglia cresce e dall’alto se cala, mentre la casella cambia larghezza con power3.inOut. Le parole partono sfalsate di 30 millesimi.
Radio veri e la taglia esaurita
Sotto ogni taglia c’è un radio vero: con le frecce si passa da una taglia all’altra e quella esaurita, col radio disabled, viene saltata da sola; lo screen reader legge «Extra small, sold out» e una regione aria-live dice le misure. Il radio disabilitato non sente il puntatore (pointer-events: none), così la sua etichetta può accorgersi del passaggio o del tocco e far ridisegnare la barra. Un clic da script sulla fila (l’anteprima della libreria) fa un passo di un giro: una taglia più su, una più giù, quella esaurita, la più grande e di nuovo M.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SIZES | script.js | [['XS', 'Extra small', 84, 66, false], ['S', 'Small', 90, 68, true], …] | Le taglie: sigla, nome, torace e lunghezza in cm, e se è disponibile. |
START | script.js | 2 | La taglia scelta all’apertura della pagina (se è esaurita, la prima disponibile). |
NARROW | script.js | 54 | La larghezza (asse wdth) della taglia più piccola: 50 è la più stretta. |
WIDE | script.js | 136 | La larghezza della taglia più grande: 150 è la più larga. |
GROW | script.js | 12 | Quanto si allargano ancora le lettere della taglia scelta. |
LIGHT | script.js | 300 | Il peso delle taglie non scelte (da 100 a 900). |
BOLD | script.js | 760 | Il peso della taglia scelta. |
SPRING | script.js | [24, 0.78] | Le molle della cornice: quanto sono rapide e quanto smorzate (sotto 1 vanno un pelo oltre e tornano). |
FIT | script.js | 'Fits true to size' | La fine della riga delle misure. |
Quando usarla
Nella scheda di un capo in un negozio di abbigliamento (magliette, maglioni, giacche, scarpe con le taglie in lettere), nel modulo d’ordine delle magliette di un evento o di una squadra, nel configuratore di un prodotto che viene in più misure: ovunque la taglia scelta deve vedersi subito e le misure devono cambiare con lei.
Sul telefono
La stessa animazione con le misure adattate: lo script misura la riga e rimpicciolisce il carattere quanto basta perché ci stia nello schermo con tutte le taglie, cornice e righello compresi. Il tocco fa da hover: premendo una taglia le lettere si allargano un poco e si schiacciano, lasciandola tornano. Toccando la taglia esaurita la barra si ridisegna e la riga lo dice per un paio di secondi.
Con il movimento ridotto
Niente si sposta: le taglie compaiono già al loro posto in dissolvenza, scegliendone una la sua larghezza e il suo peso cambiano di colpo, la cornice svanisce e ricompare intorno alla nuova senza viaggiare, e le parole della riga cambiano in dissolvenza invece di rotolare.
Trappole
- La cornice non può andare verso una misura presa al clic: mentre la taglia nuova si allarga e la vecchia si stringe, tutte le caselle cambiano posto. Le molle inseguono la casella misurata di nuovo a ogni fotogramma, e così la cornice arriva giusta anche a metà di un cambio.
- Il primo carattere provato, Roboto Flex, con il file wdth.css di Fontsource cambiava larghezza di poco (da 141 a 177 pixel per «XS M XL»): le taglie sembravano tutte uguali. Con Anybody la stessa riga va da 43 a 257 pixel e la differenza si vede al primo sguardo.
- Un radio disabled non riceve i clic e Playwright si rifiuta di cliccarne l’etichetta: con pointer-events: none sul radio esaurito il puntatore arriva all’etichetta, che può reagire senza che la taglia si possa scegliere.
- Le parole che entrano in una casella che si allarga partendo da zero si schiacciano una sull’altra: alla prima scrittura le caselle hanno subito la loro larghezza, e solo le lettere rotolano dentro.
Librerie
GSAP 3.15.0, Anybody (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,6 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 16 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.
