Il menu a onda di peso
Menu, Testo, Hover, Fisica
NuovaGratis
Tutti i componenti
La nav col tram
La barra di navigazione in alto di una compagnia di tram storici. La barra fa da soffitto alla linea: sotto pende il filo di contatto e sotto il filo corre su un binario un tram a due casse, crema e rosso pomodoro, fermo sotto la pagina in cui si è, col pantografo appoggiato al filo. Scegliendo un'altra voce suona la campana, il tram parte inclinandosi all'indietro, dal pantografo schizzano scintille, frena con le scintille sotto le ruote, dondola sulle molle e apre le porte. Puntando una voce il filo sopra di lei vibra.
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 tram nav</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the top bar of a heritage tram company. The bar is the ceiling of the line: the contact wire hangs under it,
and under the wire a double-ended tram runs on its rail to the page you are on, its pantograph sliding along
the wire. Choosing another link the bell rings, the tram pulls away leaning back, sparks fly where the
pantograph touches the wire, it brakes with sparks under the wheels, sways on its springs and opens its doors.
Pointing at a link plucks the wire over it. -->
<div class="line" data-line>
<header class="bar" data-bar>
<a class="brand" href="#" aria-label="Brassline heritage trams, home">
<svg class="brand__mark" viewBox="0 0 26 22" aria-hidden="true">
<path class="brand__wire" d="M1 2.2h24"/>
<path class="brand__pole" d="M13 2.5l-3.4 4.6h6.8z"/>
<rect class="brand__body" x="3" y="7.4" width="20" height="9.6" rx="2.4"/>
<path class="brand__glass" d="M6 9.6h4v3.2H6zM11.2 9.6h3.6v3.2h-3.6zM16 9.6h4v3.2h-4z"/>
<path class="brand__rail" d="M1 20.4h24"/>
<circle class="brand__wheel" cx="8" cy="18.2" r="1.6"/>
<circle class="brand__wheel" cx="18" cy="18.2" r="1.6"/>
</svg>
<span class="brand__name">Brassline</span>
</a>
<nav class="nav" aria-label="Main">
<ul class="list" data-list>
<li class="item"><a class="link" href="#" aria-current="page" data-link>Routes</a></li>
<li class="item"><a class="link" href="#" data-link data-autoclic>Tours</a></li>
<li class="item"><a class="link" href="#" data-link data-autoclic>Tickets</a></li>
<li class="item"><a class="link" href="#" data-link data-autoclic>Depot</a></li>
</ul>
</nav>
<a class="cta" href="#" data-cta><span class="cta__label">Book a ride</span></a>
</header>
<canvas class="track" aria-hidden="true" data-track></canvas>
</div>
</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.
27 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 nav col tram» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una barra verde bottiglia alta 64 pixel: a sinistra un piccolo tram disegnato e il nome Brassline, al centro quattro voci, Routes, Tours, Tickets e Depot, a destra il pulsante d'ottone Book a ride. Sotto la barra pende il filo di contatto, appeso a corti pendini, e più in basso corre un binario d'acciaio su traversine di legno. Sotto la voce corrente sta fermo un tram a due casse: metà alta crema con sei finestrini di vetro scuro, metà bassa rosso pomodoro con una riga d'ottone, tetto grigio con le casse delle resistenze, due carrelli con le balestre e otto ruote coi raggi, porte a due ante al centro con i corrimano d'ottone, le targhe ovali della compagnia, le tendine delle destinazioni, il fanale crema davanti e quello rosso dietro, e sul tetto il pantografo a braccio che spinge il filo un poco in su. Dentro ci sono le sagome dei passeggeri e il conducente nella cabina davanti. All'arrivo il tram entra da sinistra. Scegliendo un'altra voce la parola prende peso e larghezza, suona la campana (due archi sopra la cabina), il fanale davanti si accende verso la nuova direzione, il tram prende velocità inclinandosi all'indietro e i passeggeri si inclinano un attimo dopo; le ruote girano per la strada fatta, sui vetri scorre un riflesso, sul binario davanti c'è il fascio del fanale, e dal pantografo che corre sul filo schizzano scintille all'indietro. Frenando la cassa si piega in avanti e sotto le ruote partono scintille che rimbalzano sul binario; arrivato va un poco oltre, torna, dondola sulle molle, poi le porte si aprono mostrando la luce calda dell'interno e si richiudono. Col mouse su una voce il filo sopra di lei vibra. Quando niente si muove non si ridisegna niente.
Come funziona
Il tram su una molla col freno
La posizione del tram è una molla verso la fermata, con lo smorzamento 0,86 e la pulsazione presa da RIDE_TIME, ma la spinta è limitata a 2600/RIDE_TIME² pixel al secondo quadrato: da lontano il tram non scatta, prende velocità, corre e frena, e arriva andando appena oltre. Il passo è di 1/120 di secondo, mai più di 1/30 per fotogramma.
La cassa sulle molle, i passeggeri dopo
L'accelerazione diventa l'angolo che la cassa vuole (all'indietro quando parte, in avanti quando frena), inseguito da una molla con un po' di smorzamento; i passeggeri seguono la cassa con un'altra molla più molle, quindi si inclinano un attimo dopo. All'arrivo una spinta verso l'alto e una di traverso fanno dondolare la cassa sulle balestre.
Il pantografo sul filo
Il pantografo si disegna nelle coordinate del mondo: il piede segue il tetto che si inclina, la testa sta sul filo. Il filo è una curva calcolata punto per punto: un piccolo rigonfiamento a campana dove il pantografo lo spinge, più le vibrazioni lasciate dalle voci puntate, ognuna una sinusoide che si smorza dentro una campana. Mentre il tram corre veloce la testa ha un po' di ruvidità su una molla tesa.
Scintille vere, non puntini
Sopra i 70 pixel al secondo, con una probabilità proporzionale alla velocità e a SPARKS, dal contatto col filo partono scintille all'indietro; quando il tram frena forte partono dalle ruote verso l'alto. Ogni scintilla ha una velocità, la gravità e una vita di qualche decimo di secondo, rimbalza sul binario perdendo forza e si disegna come una riga corta nella direzione in cui vola, bianca e poi arancio.
I dettagli che cambiano con la corsa
Le ruote girano della strada fatta diviso il raggio, il riflesso sui vetri scorre con la posizione, il fanale davanti e quello rosso dietro si scambiano secondo la direzione, il fascio sul binario cresce con la velocità, la campana sono due archi che si aprono e svaniscono. Le porte sono due ante che scorrono con GSAP dopo la fermata e mostrano la luce calda dell'interno.
Il disegno dorme
Il ciclo di requestAnimationFrame si ferma quando il tram è fermo, le molle sono a riposo, non ci sono scintille né vibrazioni e GSAP non sta muovendo le porte; ogni evento lo risveglia. Le fermate sono i centri delle voci misurati con getBoundingClientRect, rifatti al resize.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
RIDE_TIME | script.js | 1.2 | Più o meno quanti secondi ci mette il tram ad arrivare sotto una voce nuova. |
SPARKS | script.js | 1 | Quante scintille schizzano dal filo e dai freni (0, nessuna). |
SWAY | script.js | 1 | Quanto la cassa si inclina e dondola sulle molle (0, resta dritta). |
WIRE_PLUCK | script.js | 1 | Quanto vibra il filo sopra una voce puntata (0, fermo). |
DOOR_PAUSE | script.js | 0.9 | Quanti secondi restano aperte le porte alla fermata (0, restano chiuse). |
TRAM_SIZE | script.js | 1 | Quanto è grande il tram. |
Quando usarla
Per la testata di chi ha a che fare con le città e i mezzi: una compagnia di tram storici o di gite turistiche, un museo dei trasporti, un'app di trasporto pubblico, un albergo in centro, un tour della città, un sito di eventi in giro per la città. Sta bene con poche voci corte; i colori della barra e del tram si cambiano nelle variabili.
Sul telefono
Sotto i 640 pixel la barra è alta 60 pixel, il nome e il pulsante spariscono, resta il piccolo tram disegnato e le quattro voci si distribuiscono su tutta la larghezza. Il tram, il filo e il binario sono gli stessi, e un dito giù su una voce fa vibrare il filo come il mouse.
Con il movimento ridotto
Il tram non corre, non si inclina e non schizzano scintille: scegliendo un'altra voce sfuma dove era e ricompare fermo sotto la voce nuova. Il filo resta fermo e le porte chiuse; le parole cambiano peso senza animazione.
Trappole
- Lo spazio fra il filo e il tetto è di pochi pixel: con il tram più grande il pantografo diventava un trattino schiacciato. TRAM_SIZE è limitato fra 0,85 e 1,05, e il piede del pantografo si calcola dal tetto inclinato, così la testa resta sempre sul filo.
- Il tram è a due casse, uguale nei due versi: invece di girarlo come una barca, cambiano il fanale davanti e quello rosso dietro, il conducente passa nella cabina dell'altra parte e il pantografo trascina dalla parte giusta.
- Le scintille disegnate come cerchi sembravano i pallini luminosi che Luca non vuole: sono righe corte lungo la direzione in cui volano, con la gravità e un rimbalzo sul binario.
Librerie
GSAP 3.15.0, Bricolage Grotesque (font variabile, con gli assi del peso e della larghezza) 5.3.0.
Compressi con gzip, i tre file della demo pesano 10 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 23 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.
