Il pulsante elastico
Pulsanti, Hover, Testo
NuovaGratis
Tutti i componenti
La valutazione a parole che pesano
Nello stile minimal: il voto è una parola sola, da Poor a Superb, sopra una riga sottile con cinque tacche. Scorrendo lungo la riga la parola prende peso e larghezza dal vivo, sugli assi del carattere variabile, e il peso le corre dentro una lettera dopo l’altra; dove il voto cambia, le lettere in comune scivolano al loro posto nuovo e le altre si scambiano in fila. Scelto il voto, la tacca si accende di blu e la parola si posa sulla riga.
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 rating in words that weigh</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">
<!-- a rating given with one word: a hairline scale with a notch for each grade, and over it the word for the grade
under the pointer, which takes weight and width as the pointer moves along the scale. Where the word changes,
the letters the two words share slide to their new places and the others swap, one after the other. Picked,
the notch lights up and the word settles on the line. Under the scale there are real radio buttons; the
letters and the scale are drawn by the script -->
<form class="weigh" data-weigh onsubmit="return false">
<p class="weigh__ask" id="weigh-ask">How did you sleep?</p>
<fieldset class="weigh__pad" aria-labelledby="weigh-ask" data-pad data-autoclic>
<div class="weigh__word" aria-hidden="true" data-word></div>
<div class="weigh__scale" data-scale>
<svg class="weigh__art" aria-hidden="true" data-art>
<defs>
<clipPath id="weigh-fill"><rect x="0" y="0" width="0" height="40" data-fill/></clipPath>
</defs>
<path class="weigh__line" data-line/>
<path class="weigh__line weigh__line--ink" clip-path="url(#weigh-fill)" data-line-ink/>
<g data-ticks></g>
<line class="weigh__needle" data-needle/>
</svg>
<div class="weigh__choices" data-choices></div>
</div>
</fieldset>
<p class="weigh__note" role="status" aria-live="polite" data-note></p>
</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.
23 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 valutazione a parole che pesano» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco la domanda How did you sleep?, piccola e nera; sotto, grande e grigia, la parola Rate, e più sotto una riga sottile grigia con cinque tacche corte appese, una per voto, e la scritta Slide along the line. Passando sopra col puntatore compare un ago nero sopra la riga, la riga si fa nera fino all’ago e la parola diventa quella del voto indicato, in nero: Poor, sottilissima e stretta, Fair, Good, Great e Superb, nera e larga. Il carattere non salta da un voto all’altro: fra due tacche la parola ha un peso e una larghezza in mezzo, e vicino a una tacca resta nella sua forma. Il peso non arriva a tutta la parola insieme: corre lungo le lettere, da sinistra se si va verso i voti alti, da destra se si torna indietro. Quando si passa a un altro voto, le lettere che le due parole hanno in comune (la r fra Poor e Fair, la G fra Good e Great) scivolano al loro posto nuovo con una molla, un pixel oltre e indietro; le altre escono in alto sfumando e le nuove salgono dal basso una dopo l’altra. Al clic la tacca del voto si allunga con un piccolo rimbalzo e si accende di blu, la parola si posa sulla riga (le lettere scendono di un pixel o due, quelle in mezzo per prime, di più quanto più pesa la parola) e la riga sotto si piega appena e si rimette dritta. Sotto compare Thank you. Sleep well., e a ogni cambio di idea Changed to seguito dal voto nuovo. Uscendo la parola torna al voto scelto, o a Rate se non c’è ancora. Col dito si scorre lungo la riga o sulla parola e il voto cade dove il dito si alza; con la tastiera le frecce spostano subito la parola e registrano il voto dopo una breve pausa, Invio lo registra subito.
Come funziona
Cinque tacche sopra cinque radio veri
Sopra le tacche ci sono cinque radio veri, trasparenti e senza eventi del puntatore, in un fieldset legato alla domanda (aria-labelledby): Tab ci entra, le frecce cambiano il voto, gli screen reader leggono la parola (aria-label) e il modulo manda il valore. La mano lavora su parola e riga con gli eventi del puntatore; le frecce spostano subito la parola e registrano il voto dopo 0,55 secondi di pausa (un gsap.delayedCall che ogni tasto riparte), Invio e Spazio lo registrano subito. L’anello della tastiera sta intorno alla tacca.
Il carattere misurato una volta sola
Ogni lettera è uno span messo a mano dallo script, con i suoi assi wght e wdth. Per non chiedere la misura alla pagina a ogni fotogramma, all’inizio si misurano a 100 pixel tutte le lettere delle parole, e tutte le coppie di vicine per la crenatura, su una griglia di cinque pesi per cinque larghezze (Anybody va da 100 a 900 e da 50 a 150); ogni forma in mezzo si legge dalla griglia con un’interpolazione bilineare. Dalle stesse misure viene la grandezza del carattere: la parola più larga lungo tutta la riga deve stare nel riquadro, e al resize si rifà il conto.
Il peso che corre lungo la parola
Il punto sulla riga va da 0 a 4 ed è inseguito da una molla appena smorzata. Il punto viene tirato un poco verso la tacca più vicina (una curva a potenza, DETENT), così vicino alla tacca la parola resta nella sua forma e a metà strada è esattamente la forma di mezzo; da lì si leggono peso e larghezza fra THIN e BOLD, NARROW e WIDE. Ogni lettera insegue quella forma con un filtro del primo ordine, e la sua costante di tempo cresce di RIPPLE secondi per ogni posto dalla parte da cui arriva la mano: il peso entra nella parola come un’onda.
Le lettere in comune restano
Quando il punto passa la metà fra due tacche (con un piccolo margine, perché la parola non tremi sul confine) le due parole si allineano con la sottosequenza comune più lunga: le lettere che restano sono gli stessi span, e il salto fra il loro posto vecchio e quello nuovo diventa uno scarto che una molla porta a zero con un pixel di troppo. Le lettere nuove nascono al loro posto sotto la riga della parola e salgono con back.out(0.9), una dopo l’altra (STAGGER) nel verso della mano; quelle vecchie restano dov’erano, salgono e sfumano in 0,15 secondi.
La parola che si posa
Scelto il voto, la tacca si allunga e prende l’accento con back.out(2.4). Quando la parola giusta è arrivata alla tacca, le lettere scendono di SETTLE pixel per la parola più pesante (un terzo per la più leggera) con uno schiacciamento di un pixel, risalgono di un terzo e si rimettono, quelle in mezzo per prime; nello stesso momento la riga si piega sotto la tacca con una gaussiana e torna dritta. Tutto gira su un solo ciclo nel ticker di GSAP, col passo limitato a 1/30 di secondo, che si toglie quando niente si muove.
Dito, tastiera, anteprima
Col dito si scorre di lato sulla riga o sulla parola (touch-action: pan-y) e il voto cade dove il dito si alza; un pulsante del mouse lasciato lontano non sceglie niente. Un clic da script (detail 0, l’anteprima della libreria) fa da mano finta in una timeline di GSAP: scorre fino al voto e sceglie a turno Superb, Fair, Great e Poor, poi rimette tutto a riposo e ricomincia.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LABELS | script.js | ['Poor', 'Fair', 'Good', 'Great', 'Superb'] | La parola per ogni voto, dal più basso al più alto (e quante tacche: da 2 a 7). |
IDLE | script.js | 'Rate' | La parola che si vede, in grigio, prima di scegliere un voto. |
START | script.js | 0 | Il voto scelto all’apertura della pagina (0 = nessuno). |
THIN | script.js | 130 | Il peso della parola del voto più basso (da 100 a 900). |
BOLD | script.js | 900 | Il peso della parola del voto più alto (da 100 a 900). |
NARROW | script.js | 54 | La larghezza della parola del voto più basso (da 50 a 150). |
WIDE | script.js | 140 | La larghezza della parola del voto più alto (da 50 a 150): più è larga, più la parola si rimpicciolisce per stare nel riquadro. |
SIZE | script.js | 64 | La grandezza massima della parola, in pixel; in un riquadro stretto diventa più piccola. |
DETENT | script.js | 0.6 | Quanto ogni tacca tiene la parola nella sua forma (0 = il peso cambia in modo uniforme lungo la riga). |
RIPPLE | script.js | 0.03 | Il ritardo fra una lettera e la successiva mentre il peso corre lungo la parola, in secondi. |
STAGGER | script.js | 0.045 | Il tempo fra una lettera e la successiva quando si scambiano, in secondi. |
SETTLE | script.js | 2.5 | Di quanti pixel scende la parola più pesante quando si posa sulla riga. |
Quando usarla
Per chiedere com’è andata una notte in un hotel o in una casa vacanza, per il voto a un prodotto dopo l’acquisto, a un piatto o a una consegna, per il sondaggio alla fine di un evento: ovunque una parola dica più di cinque stelle e il voto debba stare in una riga sola, sobria, con un carattere che fa da protagonista.
Sul telefono
La riga è lunga 300 pixel anche a 390 e la parola si rimpicciolisce quanto basta perché Superb, la più larga, stia nel riquadro (circa 56 pixel). Col dito si scorre di lato sulla riga o sulla parola e il voto cade dove il dito si alza; in su e in giù la pagina scorre ancora (touch-action: pan-y). Un tocco sceglie subito, con lo stesso scambio di lettere e lo stesso assestamento. La scritta sotto dice Slide or tap along the line.
Con il movimento ridotto
Niente scivolate, niente onde e niente assestamento: la parola prende subito la forma del voto indicato, e quando cambia la vecchia sfuma e la nuova compare al suo posto; la tacca si accende in dissolvenza, l’ago e la scritta sotto cambiano senza muoversi.
Trappole
- Il primo scambio faceva sparire le lettere vecchie con la stessa curva del loro salire (power2.in): restavano piene fino all’ultimo e per un attimo le due parole si leggevano una sopra l’altra. Ora l’opacità e il movimento sono due tween separati: le lettere vecchie sfumano in 0,15 secondi, le nuove partono 0,08 secondi dopo.
- Nella prima prova la fascia della parola era alta una volta e mezzo il carattere, con la parola centrata: fra Poor e la riga restava un vuoto di quaranta pixel e la parola non sembrava appoggiata alla riga. Ora la fascia è alta 1,45 volte il carattere, quanto basta perché la p di Superb e le lettere che salgono non siano tagliate dalla sfumatura ai bordi.
- Con il movimento ridotto le lettere in comune saltavano al loro posto nuovo mentre le altre sfumavano, e si leggeva un miscuglio delle due parole: ora con il movimento ridotto la parola intera sfuma e la nuova compare dopo.
Librerie
GSAP 3.15.0, Anybody (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 11 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.
