La valutazione col bilanciere

Valutazioni, Fisica, SVG, HoverGSAPImpegnativaPeso compresso: Demo 12 KBGSAP 28 KBGratisScarica lo zip

La fatica a fine allenamento si dà caricando un bilanciere: scorrendo sulla sbarra, per ogni grado un paio di dischi di gomma scivola sui manicotti e batte contro il precedente, e la sbarra si flette sotto il peso come una trave vera. Scelto il carico, i fermi si chiudono di scatto, il bilanciere viene tirato su e le estremità frustano, più lente quanto più è pesante; la parola sotto si allarga e ingrassa col carico.

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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The barbell rating</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 effort question at the end of a workout, answered by loading a barbell. Sliding along the bar loads it:
         a pair of rubber plates for every step of effort slides onto the sleeves, knocks against the plate before it,
         and the bar bends under the weight. Picked, the lock collars snap shut and the bar is pulled up, whipping at
         the ends; the word under it grows wider and bolder with the load. Under the bar there is a real range input;
         the bar itself is drawn by the script -->
    <form class="lift" data-lift onsubmit="return false">
      <p class="lift__ask" id="lift-ask">How hard was today’s workout?</p>
      <div class="lift__bar" data-bar data-autoclic>
        <svg class="lift__art" aria-hidden="true" data-art>
          <defs data-defs></defs>
        </svg>
        <input class="lift__range" type="range" name="effort" min="0" max="5" step="1" value="0" aria-labelledby="lift-ask" aria-valuetext="Not rated yet" data-range>
        <span class="lift__ring" aria-hidden="true"></span>
      </div>
      <p class="lift__word" aria-hidden="true"><span data-word>Slide along the bar</span></p>
      <p class="lift__thanks" role="status" aria-live="polite" data-thanks></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.

30 valori da cambiare

Apri il Playground

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 col bilanciere» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco la domanda How hard was today’s workout?, in un carattere stretto e nero; sotto, un bilanciere visto di lato e appena dalla sua destra: la sbarra di acciaio grafite con la zigrinatura nelle zone delle mani, i due collari fissi e i manicotti cromati, e sui manicotti la sagoma pallida di cinque dischi per parte, i posti vuoti; più sotto, in grigio, Slide along the bar. Passando sopra col puntatore, da sinistra a destra, il bilanciere si carica: per ogni grado di fatica un paio di dischi di gomma arriva dalle estremità, scivola sul manicotto, batte contro il disco precedente con un piccolo rimbalzo e si ferma; quelli di troppo tornano indietro, escono dal manicotto e cadono girandosi mentre spariscono. I dischi vanno dal giallo all’arancio, al vermiglio, al rosso e al rosso sangue di bue. Sotto il peso la sbarra si flette come una vera: fra le mani si inarca appena in su, oltre le mani le estremità scendono e i dischi si inclinano con lei; ogni disco che arriva la fa oscillare prima di fermarsi, più lenta quanto più è carica. Sotto si legge la parola di quel carico, Easy, Moderate, Hard, Very hard o All out, che si allarga e ingrassa man mano che i dischi si posano: stretta e leggera con un disco, larga e nerissima con cinque. Uscendo, il bilanciere torna al carico scelto, o si svuota se non c’è ancora. Scegliendo, i fermi scivolano sui manicotti e la loro leva arancio si chiude di scatto, poi il bilanciere viene tirato su e rimesso giù: le estremità restano indietro, frustano e oscillano, tanto più quanto è pesante, e col carico più alto la parola trema un attimo in cima allo sforzo. Sotto compare Logged. Your next plan adapts to it., e a ogni cambio di idea Changed to seguito dal carico nuovo: i fermi si riaprono, i dischi cambiano e i fermi si richiudono. Col dito si scorre sulla sbarra e la scelta cade dove il dito si alza; con la tastiera le frecce caricano subito e registrano la scelta dopo una breve pausa.

Come funziona

Una sbarra sopra a un range vero

Sopra il bilanciere c’è un input range vero, trasparente e senza eventi del puntatore: Tab ci entra, le frecce, Inizio e Fine cambiano il carico, gli screen reader leggono la domanda (aria-labelledby) e la parola del carico (aria-valuetext), e il modulo manda il valore. Il minimo è 0 (non ancora scelto) fino alla prima scelta, poi 1. La mano lavora sulla sbarra con gli eventi del puntatore; i tasti caricano subito e registrano la scelta dopo 0,55 secondi di pausa (un gsap.delayedCall che ogni tasto riparte), Invio e Spazio la registrano subito.

La flessione di una trave

La forma della flessione viene dalla teoria delle travi: una sbarra tenuta a GRIP dal centro col peso oltre le mani. Fra le mani la curvatura è costante e la sbarra si inarca in su; oltre, alla rotazione all’appoggio si somma la freccia di una mensola. Tutto si riduce a un numero, quanto scende la punta, che va verso BEND per il carico su una molla: ω²(qs − q) − 2ζω·q′ meno l’accelerazione del centro moltiplicata per la parte di massa che sono i dischi. Ogni disco pesa per il suo braccio (la distanza dalle mani) e solo quando il suo foro è sul manicotto; ω cala col carico (WHIP[0] è la frequenza a pieno carico) e ζ è WHIP[1]. Così quando le mani tirano su la sbarra le estremità restano indietro e frustano.

I dischi, una molla e un urto

Ogni disco è un corpo che scorre lungo il manicotto, spinto verso il suo posto da una molla poco frenata, quindi arriva lanciato. Non può entrare nel disco più interno (o nel collare fisso): la posizione si corregge e la velocità rimbalza per CLANK, e il disco batte e si ferma. I dischi entrano dal più interno, a STAGGER secondi l’uno dall’altro, ed escono dal più esterno; oltre la fine del manicotto un disco cade, con gravità, un giro e una dissolvenza. Le somme si fanno sul ticker di GSAP a passi di 1/240 di secondo, col fotogramma limitato a 1/30; quando niente si muove più il ticker si toglie, e un’oscillazione sotto 0,08 pixel si ferma.

Il disegno da lontano a vicino

Il bilanciere è visto appena dalla sua destra: un disco è un cilindro corto, il bordo fra due mezze ellissi e la faccia (solo quella verso destra) con l’anello e il mozzo d’acciaio. Si disegna da lontano a vicino, cioè da sinistra a destra. La sbarra però è un oggetto solo che attraversa tutto: si disegna intera, poi due volte con un use ritagliato da un clipPath che si sposta a ogni fotogramma, dalla faccia interna del disco più interno a sinistra in poi e dalla faccia esterna dell’ultimo disco a destra in poi, così il manicotto sparisce nei dischi ed esce dal mozzo. Luci e ombre del cromo sono linee parallele alla flessione, spostate lungo la normale; la zigrinatura è un tratteggio che segue la curva.

Fermi, sollevamento e parola

Scegliendo, quando i dischi sono quasi fermi i fermi scivolano sui manicotti con una timeline di GSAP e la leva si chiude con back.out; poi le mani, un valore portato su e giù da un’altra timeline, tirano il centro della sbarra con una molla rigida: più carico vuol dire salita più lenta e più bassa e pausa più lunga in cima. La parola è in Anybody: font-stretch da 80 a 142% e peso da 420 a 890 seguono il carico sulla sbarra, un poco in ritardo, quindi la parola si gonfia a ogni disco che si posa; col carico più alto trema di 0,8 pixel in cima allo sforzo.

I posti vuoti, il dito e l’anteprima

La sagoma pallida dei dieci posti sta dietro la sbarra mentre si sceglie e svanisce quando i fermi si chiudono. Col dito si scorre di lato sulla sbarra (touch-action: pan-y) e la scelta cade dove il dito si alza; un pulsante del mouse lasciato fuori dalla sbarra non sceglie niente. Un clic da script (detail 0, l’anteprima della libreria) fa da mano finta: scorre fino al carico e registra a turno All out, Moderate, Very hard, Easy e Hard.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`LABELS`	script.js	`['Easy', 'Moderate', 'Hard', 'Very hard', 'All out']`	La parola per ogni carico, dal più leggero al più pesante (e quanti dischi per parte: da 2 a 8; i colori si spartiscono la scala dal giallo al rosso sangue di bue).
`START`	script.js	`0`	Il carico scelto all’apertura della pagina (0 = sbarra vuota).
`BEND`	script.js	`3.6`	Quanto scendono le estremità della sbarra per ogni paio di dischi, in pixel.
`WHIP`	script.js	`[2.4, 0.085]`	La frusta della sbarra a pieno carico: quante volte al secondo oscilla e quanto in fretta si calma.
`LIFT`	script.js	`9`	Quanto viene tirato su il bilanciere quando la scelta è registrata, in pixel (un poco meno coi carichi pesanti).
`CLANK`	script.js	`0.3`	Quanto rimbalza un disco contro quello prima (0 = niente, 1 = con tutta la sua velocità).
`STAGGER`	script.js	`0.07`	Il tempo fra un disco e il successivo quando entrano o escono, in secondi.

Provali nel Playground

Quando usarla

Per la fatica percepita a fine allenamento in un’app di palestra, di corsa o di ciclismo (la scala RPE), per il diario che un allenatore legge, per chiedere quanto è stata dura una lezione di fitness o una salita: ovunque un voto vuol dire peso e fatica, e le stelle direbbero piuttosto se è piaciuto.

Sul telefono

Il bilanciere si stringe con lo schermo: 358 pixel a 390. Col dito si scorre di lato sulla sbarra e la scelta cade dove il dito si alza; in su e in giù la pagina scorre ancora (touch-action: pan-y). Un tocco sceglie subito.

Con il movimento ridotto

Niente scivolate, niente oscillazioni e niente sollevamento: i dischi compaiono e spariscono in dissolvenza al loro posto, la sbarra prende subito la sua flessione e i fermi compaiono in dissolvenza; la parola cambia in dissolvenza e prende subito la sua larghezza, senza tremare.

Trappole

I primi dischi avevano i colori delle gare (verde, giallo, blu, rosso): messi uno accanto all’altro ricordavano il marchio di un’azienda famosa. Ora vanno in scala dal giallo al rosso sangue di bue, che dice anche il crescere della fatica.
Visto appena da destra, il manicotto deve sparire dentro i dischi e uscire dal mozzo; con un solo ordine dei livelli non si può, perché la sbarra attraversa tutte le profondità. Si disegna tre volte: intera, e due volte con un use ritagliato da un clipPath che segue i dischi a ogni fotogramma.
La luce sulla sbarra prendeva il tratteggio della zigrinatura: la regola di una classe nel CSS vince sull’attributo stroke-dasharray="none" dell’SVG. Ha la sua classe.
Un’oscillazione smorzata non finisce mai davvero: il ticker ridisegnava per più di sei secondi oscillazioni sotto il pixel. Sotto 0,08 pixel la sbarra si ferma e il ticker si toglie.
I fermi aspettavano che i dischi fossero fermi del tutto, e il sollevamento partiva un secondo dopo il tocco: ora entrano quando i dischi sono a meno di 1,2 pixel dal loro posto, e la loro scivolata copre il resto.
I dischi che cadevano dalle estremità uscivano dal riquadro del componente: la spinta verso l’esterno è limitata e svaniscono in un settimo di secondo, prima di arrivare al testo.
La domanda in Anybody alla larghezza normale andava su due righe: è a font-stretch 74%, così sta su una riga anche a 390 e il componente è alto come le altre valutazioni.
Invio sulla sbarra ancora vuota registrava Easy: senza un carico scelto i tasti di conferma non fanno niente.

Librerie

GSAP 3.15.0, Anybody (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 6 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.