Le colonne di colore
Hover, SVG
NuovaGratis
Torna alla libreria
La rete della metropolitana
La mappa della metropolitana di una città inventata che si disegna da sola: ogni linea la stende il suo primo treno, le stazioni si aprono come cerchi con un rimbalzo, poi i treni fanno servizio. Passando su una stazione, il tragitto più veloce fino al luogo dell’evento si disegna sulla mappa sbiadita e il pannello conta i minuti e i cambi.
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 metro network</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<!-- the side: the title, the journey planner and the names of the lines -->
<aside class="side">
<header class="head">
<p class="head__city" data-rise>Port Ardena Metro</p>
<h1 class="head__title" data-rise>Getting to <span data-dest>Harbour Hall</span></h1>
<p class="head__hint" data-rise>
<span class="hint--mouse">Point at any station to see the quickest way there.</span>
<span class="hint--touch">Tap any station to see the quickest way there.</span>
</p>
</header>
<!-- the planner: written by the script for the station chosen -->
<section class="trip" aria-live="polite" data-trip>
<p class="trip__idle" data-idle>Every line, every change, the fewest minutes.</p>
</section>
<!-- the lines: their names on their colours, as on the station walls -->
<ul class="legend" data-legend aria-label="Lines"></ul>
</aside>
<!-- the map: river, parks, lines, stations and trains, all drawn by the script from the data at the top of it -->
<div class="map" data-map>
<svg class="map__art" data-art role="img" aria-label="Map of the Port Ardena metro"></svg>
</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.
26 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 rete della metropolitana» da Animorio e adattala al mio sitoCosa fa
Una pagina color carta per arrivare a un evento, Harbour Hall, nella città inventata di Port Ardena: a sinistra il titolo, il pannello del tragitto e i nomi delle quattro linee su pillole dei loro colori (Crown rossa, Tide blu, Orchard verde, Quay gialla); a destra la mappa, con le linee dritte e a 45 gradi come nelle mappe vere. All’apertura il fiume Arden scorre dentro da sinistra e i due parchi crescono con un piccolo rimbalzo. Poi, una dopo l’altra, le linee si disegnano: ognuna la stende il suo primo treno, una carrozza del colore della linea con i finestrini, che corre in testa al tracciato e se lo tira dietro. Quando la linea arriva a una stazione, la stazione si apre come un cerchio bianco con un rimbalzo elastico e il nome scivola fuori dal suo lato; uno scambio che la linea raggiunge una seconda volta dà un sobbalzo. Per ultima Harbour Hall, un cerchio d’inchiostro col cuore bianco e il nome su un’etichetta nera, fa un rimbalzo più grande. Da lì i treni fanno servizio: due per linea, da capolinea a capolinea, rallentano prima di ogni stazione, si fermano e ripartono. Passando col puntatore vicino a una stazione, la mappa sbiadisce, la stazione di partenza si gonfia e il tragitto più veloce fino a Harbour Hall si disegna sopra, tratto per tratto nei colori delle linee, con le stazioni che sobbalzano mentre il disegno le raggiunge e la destinazione che rimbalza all’arrivo. Nel pannello il nome della partenza sale, i minuti contano fino al totale e compaiono le corse, con il nome della linea, le fermate e i cambi. Il tragitto resta finché si passa su un’altra stazione; un clic lontano dalle stazioni (o Esc) lo toglie. Passando sui nomi delle linee, resta a colori solo quella linea.
Come funziona
La rete come dati
In cima allo script ci sono le stazioni (nome, posizione su una griglia di 1000 per 640, lato del nome) e le linee, ognuna con le sue stazioni in ordine e le curve come coppie di numeri in mezzo. Tutto il resto si costruisce da lì: i tracciati, le stazioni di scambio (quelle che stanno su più linee), il grafo per il tragitto. Su uno schermo alto la mappa si ribalta sulla diagonale (x e y si scambiano): resta una mappa a 45 gradi vera, i lati dei nomi si ribaltano con lei e alcune stazioni hanno un lato apposta per il telefono.
Le curve arrotondate
Ogni linea è un solo path: un tratto dritto fino a poco prima di ogni curva e una curva quadratica con il punto di controllo sullo spigolo. Le stazioni non stanno mai su una curva, quindi la distanza di ogni stazione lungo la linea si misura con getTotalLength su un pezzo di path che finisce lì. Lo stesso metodo disegna i pezzi del tragitto, che così combaciano esattamente con le linee sotto.
Il treno che stende la linea
La linea si disegna con stroke-dasharray e stroke-dashoffset, guidati da un numero che va da zero alla lunghezza con power1.inOut; lo stesso numero mette il primo treno al punto giusto con getPointAtLength e lo gira lungo la linea guardando un punto poco prima e uno poco dopo. Il momento in cui il disegno arriva a una stazione si trova invertendo l’easing (una ricerca per metà sul valore), così il cerchio si apre proprio quando la linea lo tocca.
Il servizio dei treni
Ogni treno ha una timeline che si ripete per sempre: da una stazione alla successiva con power2.inOut (rallenta prima di fermarsi), una pausa, la successiva, fino al capolinea e poi indietro. Il treno che ha steso la linea riparte dal punto della timeline in cui arriva al capolinea, quindi non salta; gli altri partono sfasati di una frazione del giro e spuntano con back.out.
Il tragitto più veloce
Il grafo ha un nodo per ogni coppia stazione e linea: una corsa costa i suoi minuti (la lunghezza diviso la velocità, più mezzo minuto di fermata), un cambio costa CHANGE_MINUTES. Dijkstra trova il percorso più corto e lo divide in corse sulla stessa linea. Ogni corsa diventa due path, un bordo color carta e la linea a colori, che si disegnano uno dopo l’altro in una timeline in pausa, la cui avanzata è guidata da un tween con power2.inOut. Il puntatore sceglie la stazione più vicina entro SNAP unità della mappa, convertendo le coordinate con getScreenCTM.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
DESTINATION | script.js | 'Harbour Hall' | La stazione a cui portano tutti i tragitti: scrivi il nome di una stazione della mappa. Prende l’etichetta nera e finisce anche nel titolo. |
DRAW_TIME | script.js | 2.4 | I secondi che la mappa intera impiega a disegnarsi all’apertura. |
TRAINS | script.js | 2 | Quanti treni corrono su ogni linea (0 = nessuno, le linee si disegnano da sole). |
TRAIN_SPEED | script.js | 1 | Quanto vanno veloci i treni fra una stazione e l’altra: 2 è il doppio. |
DWELL | script.js | 0.7 | I secondi di sosta di un treno a ogni stazione. |
CHANGE_MINUTES | script.js | 4 | Quanti minuti costa un cambio di linea: più è alto, più il tragitto preferisce restare sulla stessa linea anche se è più lunga. |
BOUNCE | script.js | 1 | Quanto rimbalzano le stazioni quando si aprono e quando il tragitto le raggiunge (0 = niente rimbalzo). |
SNAP | script.js | 60 | Quanto vicino a una stazione deve arrivare il puntatore per sceglierla, in unità della mappa. |
Quando usarla
Per spiegare come si arriva in un posto con un disegno che si capisce da solo: la pagina «come arrivare» di un festival, di un concerto, di una fiera o di un hotel in città, la mappa di un campus o di un parco, la rete di un servizio di consegne. Funziona anche per qualsiasi schema fatto di nodi e collegamenti, come un percorso di studio o i passaggi di un prodotto.
Sul telefono
La stessa animazione con le misure adattate: sullo schermo alto la mappa si ribalta sulla diagonale e diventa verticale, i nomi sono più grandi in proporzione, il titolo e le linee stanno sopra e il pannello del tragitto sotto, in una riga. Si tocca una stazione per vedere il tragitto, si tocca lontano dalle stazioni per toglierlo.
Con il movimento ridotto
Niente si sposta: il fiume, i parchi, le linee e le stazioni compaiono in dissolvenza, i treni restano fermi a metà fra due stazioni. Il tragitto scelto compare in dissolvenza già intero, senza rimbalzi, e i minuti sono già scritti.
Trappole
- Il tragitto ridisegnato sopra la linea non combaciava nelle curve: i pezzi del tragitto vanno costruiti con la stessa funzione degli angoli arrotondati e con gli stessi punti della linea intera, e le stazioni non devono mai stare su una curva.
- Le stazioni si aprivano prima o dopo il passaggio della linea, perché il disegno ha un easing: il momento giusto si trova invertendo l’easing con una ricerca per metà, non con la proporzione della distanza.
- Il treno che stende la linea saltava al capolinea quando cominciava il servizio: la sua timeline parte dall’etichetta end, il punto in cui arriva all’ultima stazione, e gli altri treni sono sfasati a partire da lì.
- Saltando a metà di una timeline fatta di to(), i treni partivano dal punto sbagliato (il valore iniziale si legge solo al primo passaggio): ogni tratta è un fromTo.
- Il tragitto spariva quando il puntatore andava a leggere il pannello, perché attraversava la mappa lontano dalle stazioni: il tragitto resta fino alla stazione successiva e si toglie con un clic o con Esc.
- Sul telefono la mappa larga diventava minuscola: girata sulla diagonale riempie lo schermo alto, la grandezza dei nomi si calcola dalla scala vera, e il viewBox si prende dal riquadro di linee, stazioni e nomi, così nessun nome resta tagliato.
- Con il movimento ridotto i treni fermi sulle stazioni coprivano i cerchi: si mettono a metà fra due stazioni.
Librerie
GSAP 3.15.0, Instrument 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 13 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.
