L’indicatore a lancetta
Contatori, Fisica, SVG
NuovaGratis
Tutti i componenti
La barra con le icone vive
La barra in basso di un'app con cinque icone disegnate a tratti: scegliendone una si ridisegna a colori sopra quella grigia e fa la sua mossa (la casa fuma dal camino e apre la porta, la lente fa il giro, la campanella oscilla col batacchio, il profilo annuisce, il più diventa una X), mentre la pillola scivola allungandosi e l'etichetta sale.
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 living icons tab bar</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/figtree@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the tab bar of a phone app: five icons drawn as SVG strokes. Each one, chosen, plays its own little move: the
house puffs smoke from its chimney, the lens sweeps a circle, the bell rings, the head nods, the plus turns
into a cross. The strokes are redrawn by the script on every frame; the label and the pill move from one tab
to the next -->
<nav class="bar" aria-label="Main" data-bar>
<span class="bar__pill" data-pill aria-hidden="true"></span>
<button class="tab" type="button" data-tab="home" data-autoclic>
<svg class="tab__icon" viewBox="0 0 28 28" aria-hidden="true" data-icon></svg>
<span class="tab__label">Home</span>
</button>
<button class="tab" type="button" data-tab="search" data-autoclic>
<svg class="tab__icon" viewBox="0 0 28 28" aria-hidden="true" data-icon></svg>
<span class="tab__label">Search</span>
</button>
<button class="tab" type="button" data-tab="add" data-autoclic>
<svg class="tab__icon" viewBox="0 0 28 28" aria-hidden="true" data-icon></svg>
<span class="tab__label">New</span>
</button>
<button class="tab" type="button" data-tab="bell" data-autoclic>
<svg class="tab__icon" viewBox="0 0 28 28" aria-hidden="true" data-icon></svg>
<span class="tab__label">Alerts</span>
<span class="tab__dot" aria-hidden="true" data-dot>3</span>
</button>
<button class="tab" type="button" data-tab="profile" data-autoclic>
<svg class="tab__icon" viewBox="0 0 28 28" aria-hidden="true" data-icon></svg>
<span class="tab__label">Profile</span>
</button>
</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.
20 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 le icone vive» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco, da sola al centro, una barra bianca a pillola con un'ombra morbida e cinque icone a tratti grigi: casa, lente, più, campanella con un 3 rosso e profilo. La voce scelta è rosso pomodoro, sta in una pillola rosa e ha il suo nome sotto. All'arrivo la barra sale dal basso, poi la casa si ridisegna in rosso e fa la sua mossa. Scegliendo un'altra voce la pillola scivola fin lì su una molla, allungandosi nel verso della corsa come una goccia; l'icona di prima perde il colore dall'ultimo tratto all'indietro e il suo nome scende e sparisce, quella nuova si ridisegna in rosso tratto per tratto sopra la grigia e fa la sua mossa: la casa si schiaccia e rimbalza, la porta si apre su una luce gialla e dal camino salgono tre riccioli di fumo che svaniscono; la lente fa un giro intero piegandosi nella curva e un riflesso le attraversa il vetro; il più gira di un ottavo e diventa una X dentro una cornice che si disegna, e torna più quando si va altrove; la campanella oscilla sul gancio con il batacchio che la segue in ritardo, e il 3 sparisce; il profilo annuisce due volte con le spalle che salgono. Poco dopo aver lasciato la campanella arriva un avviso nuovo: compare un 1 e la campanella grigia suona da sola.
Come funziona
Icone fatte di numeri
Ogni icona è una funzione che, da pochi numeri, restituisce i suoi tratti come tracciati SVG: la casa da quanto è aperta la porta, quanto è schiacciata e dove sono i riccioli di fumo; la lente da quanto ha girato; il più da quanto ha ruotato e quanto sono lunghi i bracci; la campanella dai due angoli dei suoi pendoli; il profilo da quanto annuisce. A ogni fotogramma i tracciati si ricalcolano e si scrivono nell'attributo d.
Il colore che si disegna
Ogni icona è disegnata due volte con gli stessi tracciati: grigia sotto, a colori sopra. Il livello a colori ha pathLength="1" e stroke-dasharray, e un solo numero (da 0 a 1) dice quanto inchiostro c'è: ogni tratto ne ha la sua parte, uno dopo l'altro, così l'icona si ridisegna tratto per tratto e, al contrario, si spegne dall'ultimo all'indietro. Il fumo, la luce della porta, il riflesso e la cornice del più stanno solo nel livello a colori.
Le mosse
Le mosse sono timeline di GSAP sui numeri delle icone (la porta, i riccioli di fumo, il giro della lente, la rotazione del più con back.out), scalate da PLAY. La campanella no: è un pendolo scritto a mano, e il batacchio è un secondo pendolo appeso dentro di lei e spinto dalla sua accelerazione, così la segue in ritardo; una scelta le dà solo un colpo, il resto lo fa la fisica.
La pillola a goccia
La pillola segue il centro della voce scelta su una molla (PILL), a passi di 4 millisecondi con il passo del fotogramma limitato a 1/30 di secondo. Dalla velocità vengono quanto si allunga (STRETCH) e quanto si abbassa, e l'allungamento sta più davanti che dietro, come una goccia che corre.
Barra e tastiera
Le voci sono button in un nav e quella scelta ha aria-current="page"; le frecce passano da una voce all'altra, Inizio e Fine vanno ai capi. L'anteprima della libreria clicca le voci a turno: ognuna ha data-autoclic.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
START | script.js | 0 | La voce scelta all'apertura della pagina (0 è la prima). |
DRAW | script.js | 0.5 | I secondi che un'icona impiega a ridisegnarsi a colori. |
PLAY | script.js | 1 | Quanto sono ampie le mosse delle icone (0 ferme, 2 il doppio). |
PILL | script.js | [380, 0.62] | La molla della pillola: quanto è rigida e quanto è frenata. |
STRETCH | script.js | 0.0016 | Quanto si allunga la pillola con la velocità. |
BADGE | script.js | 3 | Il numero sulla campanella (0 lo nasconde). |
Quando usarla
Per la barra di navigazione di un'app o di un sito pensato per il telefono, con quattro o cinque sezioni: dove ogni tocco può avere la sua piccola ricompensa e le icone possono raccontare cosa c'è dietro (una casa abitata, una ricerca che cerca, un avviso che suona).
Sul telefono
La barra è larga 360 pixel e su un telefono si stringe alla larghezza dello schermo; resta di cinque voci uguali e ogni voce è un bersaglio di almeno 60 pixel. Al tocco l'icona si stringe appena come col mouse premuto, poi fa la sua mossa.
Con il movimento ridotto
Le icone cambiano colore in un colpo e restano ferme: niente mosse, niente fumo né oscillazioni; la pillola salta alla voce nuova senza corsa, l'etichetta compare senza salire, e il più resta un più.
Trappole
- La cornice del più si disegna da sola: contata fra i tratti che si dividono l'inchiostro, l'ultimo braccio della croce restava grigio.
- Il primo cenno del profilo faceva girare la testa intorno al collo: a 28 pixel sembrava una testa che scivola di lato. Ora la testa scende e si accorcia, come vista di fronte mentre si piega in avanti, e le spalle salgono.
- La prima porta della casa si stringeva dentro la sua cornice, e così piccola sembrava solo rimpicciolire: ora la cornice resta, si sposta il bordo libero e dietro compare una luce gialla.
- Il più tornava più da solo dopo un attimo e la X quasi non si vedeva: resta X finché la voce è scelta, e lasciandola va al quarto di giro successivo, cioè di nuovo a un più, anche se era a metà giro.
- L'avviso che arriva dopo aver lasciato la campanella va prenotato dopo aver annullato quello vecchio: nell'ordine opposto si annullava appena prenotato e non arrivava mai.
Librerie
GSAP 3.15.0, Figtree (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,2 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 4 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Fatto
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.
