L’indicatore a lancetta
Contatori, Fisica, SVG
NuovaGratis
Tutti i componenti
La barra con l'elastico
La barra in basso di un'app per allenarsi in casa: la voce scelta sta in piedi come un piolo con una corda elastica arancione intorno. Scegliendone un'altra, l'elastico viene tirato fin lì, agganciato al piolo nuovo e lasciato andare da quello vecchio: schiocca, ci si stringe intorno e ondeggia, e le icone sentono lo strappo.
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 rubber band tab bar</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/funnel-sans@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the tab bar of a home workout app. The tab you are on stands up from the bar like a peg, with a rubber band
round it. Choosing another tab, the band is pulled across the bar, hooked round the new peg and let go off
the old one: it snaps over and wobbles. The band is a ring of springs worked out on every frame and drawn
in the canvas over the tabs; the pegs and the icons below feel it -->
<nav class="bar" aria-label="Main" data-bar>
<button class="tab" type="button" data-tab="train" data-autoclic>
<span class="tab__cap" data-cap>
<span class="tab__peg" aria-hidden="true" data-peg></span>
<svg class="tab__icon" viewBox="0 0 24 24" aria-hidden="true">
<g data-part="bell"><path d="M7.7 12C6.5 9.4 7.2 5 12 5s5.5 4.4 4.3 7"/><path d="M8.6 20.6a6.2 6.2 0 1 1 6.8 0z"/></g>
</svg>
</span>
<span class="tab__label">Train</span>
</button>
<button class="tab" type="button" data-tab="timer">
<span class="tab__cap" data-cap>
<span class="tab__peg" aria-hidden="true" data-peg></span>
<svg class="tab__icon" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 6.5a7 7 0 1 0 0 14a7 7 0 1 0 0-14zM10 3.4h4M12 3.4v3.1M17.6 7.4l1.3-1.3"/>
<path d="M12 13.5V10" data-part="hand"/>
</svg>
</span>
<span class="tab__label">Timer</span>
</button>
<button class="tab" type="button" data-tab="today">
<span class="tab__cap" data-cap>
<span class="tab__peg" aria-hidden="true" data-peg></span>
<svg class="tab__icon" viewBox="0 0 24 24" aria-hidden="true">
<defs><clipPath id="sky"><rect x="0" y="0" width="24" height="16.4"/></clipPath></defs>
<g clip-path="url(#sky)"><g data-part="sun"><path d="M7 17a5 5 0 0 1 10 0"/><path d="M12 7.6V9.4M6.2 10.4l1.25 1.25M17.8 10.4l-1.25 1.25"/></g></g>
<path d="M3.5 17h17M8.5 20.2h7"/>
</svg>
</span>
<span class="tab__label">Today</span>
</button>
<button class="tab" type="button" data-tab="stats" data-autoclic>
<span class="tab__cap" data-cap>
<span class="tab__peg" aria-hidden="true" data-peg></span>
<svg class="tab__icon" viewBox="0 0 24 24" aria-hidden="true">
<path d="M6.5 19.5v-5" data-part="bar"/><path d="M12 19.5v-9" data-part="bar"/><path d="M17.5 19.5v-14" data-part="bar"/>
</svg>
</span>
<span class="tab__label">Stats</span>
</button>
<button class="tab" type="button" data-tab="you" data-autoclic>
<span class="tab__cap" data-cap>
<span class="tab__peg" aria-hidden="true" data-peg></span>
<svg class="tab__icon" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 4.6a3.6 3.6 0 1 0 0 7.2a3.6 3.6 0 1 0 0-7.2z" data-part="head"/>
<path d="M5 20c.8-3.6 3.6-5.6 7-5.6s6.2 2 7 5.6"/>
</svg>
</span>
<span class="tab__label">You</span>
</button>
<canvas class="bar__band" aria-hidden="true" data-band></canvas>
</nav>
</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.
22 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 barra con l'elastico» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco, da sola al centro, una barra color stucco come un tappetino di gomma, con cinque voci: un kettlebell, un cronometro, un sole che sorge, tre barre e una persona, coi nomi Train, Timer, Today, Stats e You. Today, nel mezzo, sta in piedi come un piolo bianco con l'icona nera, e intorno ha una corda elastica arancione con la calza intrecciata a righe oblique e un piccolo fermo di metallo che la chiude. All'arrivo tutti e cinque i pioli sono in piedi con l'elastico teso intorno a tutti, pallido per quanto è tirato; poi i pioli scendono a coppie dai due capi e l'elastico si richiude su Today. Scegliendo un'altra voce, l'elastico viene preso dal lato che la guarda e tirato fin oltre la voce, come da una mano: si allunga in una goccia sottile, più chiara e più fine dove è più tesa, con le righe della calza che si allargano. Passata la voce, il suo piolo si alza dentro l'elastico, che lo avvolge con un capo sopra e uno sotto; la mano lo lascia e per un attimo l'elastico abbraccia tutti e due i pioli. Poi il piolo vecchio scende e l'elastico schiocca verso quello nuovo, ci si stringe intorno e ondeggia, e il fermo di metallo corre con la gomma. I pioli sentono il tiro: quello nuovo si inclina verso quello vecchio mentre l'elastico lo tira, e la sua icona fa la sua piccola mossa: il sole si alza, il kettlebell dondola sul manico, la lancetta del cronometro fa il giro, le barre rimbalzano una dopo l'altra, la testa annuisce. Col mouse sopra una voce l'elastico si sporge appena verso di lei; la voce scelta, cliccata di nuovo, fa pizzicare l'elastico. L'elastico si può anche prendere col dito o col mouse e tirare: lasciato vicino a un'altra voce va lì, lasciato vicino al suo piolo torna indietro come una fionda.
Come funziona
Un anello di molle
La corda è un anello chiuso di 144 punti legati da molle, più una rigidezza a flessione (la differenza quarta delle posizioni) che arrotonda le curve senza staccarla dagli angoli del piolo. Una seconda smorzatura, sulla differenza quarta delle velocità, spegne solo le pieghe strette: dopo lo schiocco la gomma ondeggia ma non si spiegazza. Il conto si fa a passi di mezzo millesimo di secondo, col passo del fotogramma limitato a 1/30 di secondo.
I pioli e la mano
I pioli in piedi sono scatole arrotondate: un punto che ci entra viene rimesso sul bordo e perde la velocità che lo portava dentro. La somma di quelle velocità, divisa per il tempo, è la forza dell'elastico sul piolo: il piolo si sposta e si inclina con lei su una molla sua, al massimo di qualche pixel. La mano è il punto della corda più rivolto verso la voce nuova: una tween di GSAP lo porta oltre la voce, e dentro ogni fotogramma si sposta un poco a ogni passo di calcolo.
L'avvolgimento guidato
Quando il piolo nuovo si alza, i due capi della goccia gli passano quasi sulla linea di mezzo: spinti punto per punto, verrebbero messi di lato e un capo resterebbe attraverso il piolo. Così, finché sale, ogni punto viene spinto solo dalla sua parte: sopra quelli di una metà della corda (dalla mano in avanti), sotto quelli dell'altra. Poi la mano lascia, il piolo vecchio scende e la tensione fa il resto.
Gomma che si tende
Ogni tratto della corda si disegna più sottile e più chiaro quanto più è allungato rispetto al riposo, come la gomma vera. Le righe oblique della calza stanno sui punti della corda, quindi si allargano dove si tende; il fermo di metallo sta sul primo punto e gira con lei. Per costare poco i tratti si raggruppano per colore e spessore: ogni gruppo è un solo tracciato, e a riposo la corda intera sono tre.
Quando è ferma non disegna
Quando nessun punto si muove più, la mano è libera e le molle dei pioli e delle icone sono ferme, il ciclo smette di calcolare e di disegnare finché non succede qualcosa (un clic, il mouse, il dito). Le voci sono button in un nav, quella scelta ha aria-current; le frecce, Inizio e Fine spostano il fuoco, Invio e Spazio scelgono. L'anteprima della libreria clicca Train, Stats e You a turno: hanno data-autoclic.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
START | script.js | 2 | La voce scelta all'apertura della pagina (0 è la prima, 2 quella nel mezzo). |
PULL | script.js | 0.24 | I secondi che ci vuole a tirare l'elastico fino alla voce accanto (un po' di più per una lontana). |
TENSION | script.js | 1 | Quanto tira la gomma: di più, uno schiocco più veloce e secco. |
SNUG | script.js | 0.78 | Quanto è lungo l'elastico a riposo rispetto al piolo che stringe: meno, un elastico più stretto. |
WOBBLE | script.js | 0.55 | Quanto ondeggia l'elastico dopo lo schiocco (0 si ferma subito, 1 molto vivace). |
THICK | script.js | 4.6 | Lo spessore della corda, in pixel. |
PALE | script.js | 0.8 | Quanto impallidisce la gomma dove è tirata forte. |
LEAN | script.js | 1 | Quanto l'elastico si sporge verso la voce sotto il mouse (0 per niente). |
Quando usarla
Per la barra di navigazione di un'app pensata per il telefono, con quattro o cinque sezioni, quando cambiare sezione può avere un po' di gioco: un'app per allenarsi, un'app per bambini, uno strumento creativo. Anche ferma, la corda intorno al piolo dice subito dove si è.
Sul telefono
La barra è larga al massimo 420 pixel e sul telefono si stringe allo schermo, con 16 pixel di margine per lato (358 su un telefono di 390); resta alta 70 e ogni voce è un bersaglio di 68 per 70 pixel. Col dito giù su una voce l'elastico si sporge verso di lei, come col mouse sopra; dal piolo scelto l'elastico si prende e si trascina col dito.
Con il movimento ridotto
L'elastico non si tende e non schiocca: sparisce in dissolvenza dal piolo vecchio e ricompare già stretto intorno a quello nuovo, mentre i pioli compaiono e scompaiono in dissolvenza senza alzarsi. Niente entrata, niente mosse delle icone, niente pizzicata né trascinamento.
Trappole
- Il primo elastico, una linea blu tutt'intorno al piolo, a riposo sembrava l'anello del fuoco della tastiera: visto dall'alto un elastico è davvero solo una linea. È diventato una corda arancione con la calza a righe oblique e un fermo di metallo, che si legge come elastico anche da ferma.
- Alzando il piolo nuovo dentro la goccia, i due capi gli passavano quasi sulla linea di mezzo: la collisione punto per punto li spingeva di lato, un capo restava attraverso il piolo e l'elastico scivolava via e restava a terra arrotolato. Ora, mentre il piolo sale, ogni metà della corda viene spinta solo dalla sua parte.
- Dopo lo schiocco i punti arrivati di slancio si ammucchiavano contro il piolo e la corda restava con una piega a zig-zag. Sono servite una rigidezza a flessione molto più alta (stabile solo col passo di calcolo di mezzo millesimo di secondo), una resistenza alla compressione uguale a quella alla trazione e una smorzatura che agisce solo sulle pieghe strette.
- Il primo schiocco era molle e un passaggio durava più di un secondo, perché il gancio rallentava sugli ultimi pixel prima di lasciare: ora la mano lascia appena il piolo nuovo è in piedi, e la gomma è più rigida.
- La spinta verso la voce sotto il mouse era quindici volte troppo forte: l'elastico si allungava fino alla voce accanto, come se fosse già scelta. Ora si sporge di pochi pixel.
- Il kettlebell, così piccolo, col manico stretto e tondo sembrava un lucchetto: il manico ora è largo e nasce dalle spalle del corpo.
- Il ResizeObserver scatta anche appena acceso: rimetteva l'elastico intorno alla voce scelta e cancellava l'entrata. Ora interviene solo se la misura della barra cambia davvero.
Librerie
GSAP 3.15.0, Funnel Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 14 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 5 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.
