Il menu a mazzetta di colori
Menu, Fisica, Transizioni, Hover
NuovaGratis
Tutti i componenti
La barra laterale con la molla
La barra laterale di un'app di progetti con una molla giocattolo d'acciaio accanto alla pagina scelta. Scegliendo un'altra voce la molla ci cammina come lo slinky giù per le scale: un capo si stacca, la molla si inarca, le spire passano una alla volta dall'altra parte e il capo atterra sulla riga dopo, un passo per voce, fino al rimbalzo finale.
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 slinky sidebar</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/onest@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the sidebar of a small studio's project app. In the narrow column on the left, beside the page chosen, sits a
steel toy spring; choosing another page it walks there like a slinky down the stairs, one row at a time, and a
row pointed at makes it lean that way. The script draws the spring on the canvas, turn by turn -->
<div class="sl-wrap" data-wrap>
<nav class="sl" aria-label="Studio" data-nav data-autoclic>
<div class="sl__head">
<span class="sl__mark" aria-hidden="true">
<svg viewBox="0 0 24 24"><path d="M6.5 17.5V7.2L12 13.4L17.5 7.2V17.5"/></svg>
</span>
<span class="sl__studio">Marlow Studio</span>
</div>
<div class="sl__body" data-body>
<span class="sl__rail" aria-hidden="true" data-rail></span>
<canvas class="sl__spring" aria-hidden="true" data-spring></canvas>
<ul class="sl__list">
<li><a class="sl__item" href="#" data-item>
<svg class="sl__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3.5 13.5H8.2L9.6 16H14.4L15.8 13.5H20.5"/><path d="M5.6 5.5H18.4L20.5 13.5V18A1.5 1.5 0 0 1 19 19.5H5A1.5 1.5 0 0 1 3.5 18V13.5Z"/></svg>
<span class="sl__label">Inbox</span>
<span class="sl__count">4<span class="sl__sr"> new</span></span></a></li>
<li><a class="sl__item" href="#" aria-current="page" data-item>
<svg class="sl__icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="3.6"/><path d="M12 3.4V5.4M12 18.6V20.6M3.4 12H5.4M18.6 12H20.6M5.9 5.9L7.3 7.3M16.7 16.7L18.1 18.1M5.9 18.1L7.3 16.7M16.7 7.3L18.1 5.9"/></svg>
<span class="sl__label">Today</span></a></li>
<li><a class="sl__item" href="#" data-item>
<svg class="sl__icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3.5" y="5" width="17" height="15" rx="2.5"/><path d="M3.5 9.5H20.5M8 3V6.5M16 3V6.5"/><path d="M8 13.5H11M8 16.5H14"/></svg>
<span class="sl__label">Upcoming</span></a></li>
</ul>
<p class="sl__title" id="sl-projects">Projects</p>
<ul class="sl__list" aria-labelledby="sl-projects">
<li><a class="sl__item" href="#" data-item>
<svg class="sl__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 9.5H16.5V14A5 5 0 0 1 11.5 19H10A5 5 0 0 1 5 14Z"/><path d="M16.5 11H18A2 2 0 0 1 18 15H16.2"/><path d="M8.5 3.8C8 4.8 9.4 5.6 8.9 6.8M12.3 3.8C11.8 4.8 13.2 5.6 12.7 6.8"/></svg>
<span class="sl__label">Riverside Cafe</span></a></li>
<li><a class="sl__item" href="#" data-item>
<svg class="sl__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3.5 9L12 4L20.5 9Z"/><path d="M6 11.5V17M10 11.5V17M14 11.5V17M18 11.5V17"/><path d="M3.5 20H20.5"/></svg>
<span class="sl__label">Harbour Museum</span></a></li>
<li><a class="sl__item" href="#" data-item>
<svg class="sl__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 6.5C10 5 7.5 4.6 4 4.8V18.2C7.5 18 10 18.4 12 19.8C14 18.4 16.5 18 20 18.2V4.8C16.5 4.6 14 5 12 6.5Z"/><path d="M12 6.5V19.8"/></svg>
<span class="sl__label">Spring Catalogue</span></a></li>
</ul>
<ul class="sl__list sl__list--foot">
<li><a class="sl__item" href="#" data-item>
<svg class="sl__icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3.5" y="4.5" width="17" height="4.5" rx="1.2"/><path d="M5 9V18A1.5 1.5 0 0 0 6.5 19.5H17.5A1.5 1.5 0 0 0 19 18V9"/><path d="M10 13H14"/></svg>
<span class="sl__label">Archive</span></a></li>
</ul>
</div>
</nav>
</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.
38 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 laterale con la molla» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco, da sola al centro, la barra laterale chiara di un piccolo studio, Marlow Studio, larga 252 pixel: Inbox con un badge rosso col 4, Today, Upcoming, poi sotto il titoletto Projects tre progetti (Riverside Cafe, Harbour Museum, Spring Catalogue) e in fondo Archive, ognuno con la sua icona a tratto. A sinistra corre una colonna con una scanalatura sottile, e accanto alla pagina scelta, Today, sta una molla giocattolo d'acciaio coricata, disegnata spira per spira: le spire davanti lucide come cromo, con il riflesso chiaro in alto e la riga scura dell'orizzonte, quelle dietro in ombra, e sotto la sua ombra morbida sulla barra. All'arrivo la molla cade nella sua riga e rimbalza. Scegliendo un'altra voce, la molla ci va a piedi come lo slinky sulle scale: il capo libero si stacca, si inarca e atterra nella scanalatura della riga dopo, le spire passano dall'altra parte una alla volta, allargandosi nell'arco e richiudendosi fitte alle due estremità, poi l'altro capo si stacca e atterra in cima; un passo per ogni voce attraversata, più svelti se la strada è lunga, e all'ultimo il capo in cima rimbalza un paio di volte prima di fermarsi. Puntando una voce, o arrivandoci col Tab, la molla si allunga un poco verso di lei aprendo le spire in cima, come curiosa, e torna chiusa quando il puntatore va via. La molla resta sempre nella sua colonna: non copre mai un nome.
Come funziona
La linea fra i due capi
La molla ha due capi, ognuno con un posto e la direzione in cui il suo asse entra nella molla. Fra i due c'è una curva cubica che lascia ogni capo lungo il suo asse, con le maniglie tanto più lunghe quanto più i capi sono lontani (fino ad ARCH pixel), così da chiusa è un cilindro dritto e da aperta un arco tondo. La curva si misura in K punti con la sua lunghezza progressiva, per trovare un punto e la sua direzione a una distanza qualsiasi dal capo.
Le spire come una catena di masse
Le TURNS + 1 spire sono masse lungo la curva, a una distanza s dal primo capo; la prima e l'ultima sono i capi. Ognuna è legata alla successiva da una molla di rigidità STIFFNESS con lo smorzamento DAMPING, e il peso WEIGHT la tira indietro verso la scanalatura in proporzione a quanto la curva lì se ne allontana: dove la curva esce dalla scanalatura le spire si ammucchiano chiuse, dove si inarca si allargano, proprio come uno slinky vero sulle scale. Due spire non si attraversano: chiuse si toccano e vanno avanti insieme. Il passo di tempo è al massimo 1/30 di secondo, diviso in sottopassi da 1/300.
Il passo dello slinky
Un passo è fatto di due voli. Il capo in cima parte dalla sua posizione, si solleva di LIFT pixel e atterra nella scanalatura della riga dopo, mentre il suo asse ruota di mezzo giro; atterrando dà una spinta alle spire che cadevano con lui. Quando ha fatto due terzi del volo, il capo rimasto indietro si stacca e atterra in cima alla molla, già richiusa nella riga nuova. Poi tocca di nuovo al capo in cima: i due capi si scambiano i ruoli a ogni passo, come nello slinky vero. Una strada lunga va più svelta, e all'ultimo atterraggio il capo in cima rimbalza sulla molla con l'altezza data da BOUNCE.
La spira disegnata come un anello di cromo
Ogni spira è un anello intorno alla curva, visto un poco da sinistra e dall'alto: il punto a un angolo φ è il centro più la normale per R cos φ più un piccolo spostamento fisso per R sin φ, che fa dell'anello un'ellisse. La luce si calcola dalla normale dell'acciaio: un cielo chiaro sopra, una riga scura all'orizzonte e un suolo grigio sotto, come il cromo, più la luce diretta e il suo riflesso. Si disegnano prima le metà dietro, in ombra, poi le metà davanti dalla più lontana alla più vicina, ognuna con un bordo scuro sotto l'acciaio lucido; sotto tutto l'ombra sulla barra, più lontana dove la molla si alza.
La curiosità, i tasti e il riposo
Una voce puntata, toccata e tenuta o raggiunta col Tab sposta il capo in cima verso di lei di CURIOUS volte la distanza, con una molla che rimbalza un poco, e lo gira un poco. Le frecce su e giù, Home e Fine vanno di voce in voce, Invio sceglie, la pagina scelta ha aria-current. Quando niente si muove da qualche fotogramma il ciclo smette di disegnare finché qualcosa non lo sveglia.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TURNS | script.js | 24 | Quante spire d'acciaio ha la molla. |
RADIUS | script.js | 9 | Il raggio di una spira, in pixel. |
PITCH | script.js | 0.7 | Lo spessore di una spira quando la molla è chiusa, in pixel. |
STIFFNESS | script.js | 900 | Quanto forte una spira tira la successiva. |
WEIGHT | script.js | 300 | Quanto forte le spire ricadono verso la scanalatura. |
DAMPING | script.js | 0.12 | Quanto in fretta si spegne il tremolio delle spire (0: mai, 1: subito). |
STEP | script.js | 0.42 | I secondi di un passo da una riga alla successiva. |
LIFT | script.js | 11 | Quanto si solleva il capo della molla mentre scavalca, in pixel. |
ARCH | script.js | 23 | Quanto può gonfiarsi l'arco della molla fuori dalla scanalatura, in pixel. |
BOUNCE | script.js | 0.5 | Quanto rimbalza la molla quando atterra (0: si ferma e basta). |
CURIOUS | script.js | 0.26 | Quanto la molla si allunga verso una voce puntata (0: per niente). |
Quando usarla
Per la barra laterale di un'app con un po' di gioco: un gestionale di progetti o di compiti, uno strumento per uno studio creativo, un'app per bambini o per la scuola, un pannello che vuole una firma che si ricorda.
Sul telefono
La barra è larga 252 pixel e alta circa 410: a 390 pixel sta intera nello schermo. Senza puntatore, tenere il dito su una voce fa allungare la molla verso di lei, e toccarla la fa camminare fin lì.
Con il movimento ridotto
La molla non cammina e non si allunga: sparisce dalla sua riga con una dissolvenza e ricompare già chiusa accanto alla voce nuova.
Trappole
- Con la prima luce la molla sembrava una pila scura più che acciaio: il cromo non è grigio, riflette quello che ha intorno. Ora la luminosità di ogni pezzo di filo viene da un cielo chiaro sopra, una riga scura all'orizzonte e un suolo grigio sotto, più un riflesso stretto: così le spire hanno il filo di luce e il bordo scuro del metallo vero.
- L'arco del passo lungo, sopra il titoletto Projects, arrivava al bordo della colonna e sarebbe finito sulle icone: la maniglia della curva ha un massimo (ARCH) e la tela è larga quanto la colonna, così la molla non copre mai un nome.
- Con tante spire grosse la molla chiusa diventava più lunga della colonna: le manopole del Playground hanno limiti tali che la molla, anche allungata verso una voce, resti dentro, e l'allungamento della curiosità si ferma prima del bordo.
- Quando i capi si muovono la curva cambia lunghezza e le spire, misurate dal primo capo, restavano indietro verso l'altro: a ogni fotogramma le loro distanze si riscalano sulla lunghezza nuova prima della fisica.
- Il fondo grigio di una voce puntata passava sotto la molla e la faceva sembrare appoggiata su un rettangolo: il fondo e l'anello del focus partono dopo la colonna.
Librerie
GSAP 3.15.0, Onest (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 10 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 8 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.
