La tendina che cambia forma
Menu, Hover, Transizioni
Gratis
Tutti i componenti
Il menu col bruco
Una barra di navigazione con una pillola bianca sotto la pagina corrente, che va da una voce all’altra come un bruco: il bordo davanti parte subito, quello dietro lo segue, e per strada la pillola si allunga e si assottiglia; le parole diventano nere lettera per lettera quando il bordo ci passa sopra.
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 inchworm menu</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the bar: the white pill reaches the next item with its front edge first and pulls its back edge after it.
Over the pill the words are black: a copy of them, cut to the pill's shape -->
<nav class="bar" aria-label="Main" data-bar>
<span class="bar__glow" data-glow aria-hidden="true"></span>
<ul class="bar__items">
<li><a class="bar__item" href="#" aria-current="page" data-item>Home</a></li>
<li><a class="bar__item" href="#" data-item data-autoclic>Work</a></li>
<li><a class="bar__item" href="#" data-item data-autoclic>About</a></li>
<li><a class="bar__item" href="#" data-item data-autoclic>Contact</a></li>
</ul>
<div class="bar__pill" data-pill aria-hidden="true">
<ul class="bar__items">
<li><span class="bar__item">Home</span></li>
<li><span class="bar__item">Work</span></li>
<li><span class="bar__item">About</span></li>
<li><span class="bar__item">Contact</span></li>
</ul>
</div>
</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 «Il menu col bruco» da Animorio e adattala al mio sitoCosa fa
Una barra scura su un fondo nero con quattro voci, Home, Work, About e Contact, e una pillola bianca sotto quella della pagina corrente. Puntando un’altra voce, o arrivandoci con il tasto Tab, la pillola ci va come un bruco: il bordo dalla parte del movimento parte subito e arriva in 0,34 secondi, l’altro parte un decimo di secondo dopo e ci mette mezzo secondo, così per strada la pillola si allunga, si assottiglia di qualche pixel e si raccoglie all’arrivo. Le parole sotto la pillola diventano nere lettera per lettera mentre il bordo ci passa sopra. Quando il puntatore lascia la barra, dopo un attimo la pillola torna alla pagina corrente; un clic fa della voce la pagina corrente, e la pillola ci resta con un piccolo rimbalzo di gelatina. Sotto la pillola una luce bianca sfocata la segue. All’arrivo la barra sale in dissolvenza e la pillola si apre dal centro della voce corrente.
Come funziona
Due livelli uguali
Sotto ci sono le voci chiare; sopra, una loro copia nera su fondo bianco, con le stesse misure, tagliata da un clip-path inset(alto destra basso sinistra round 999px). La pillola è quel taglio: per questo le parole cambiano colore esattamente sul bordo, lettera per lettera.
I due bordi
La pillola è due numeri, i suoi bordi in pixel dal lato sinistro della barra. Le voci si misurano con offsetLeft e offsetWidth, che non risentono delle trasformazioni, all’avvio, quando il carattere è arrivato e quando cambia la loro larghezza. Il bordo dalla parte del movimento va con power3.out in LEAD secondi; l’altro aspetta TRAIL[0] secondi e ci mette TRAIL[1], con power3.inOut.
Il bruco si assottiglia
Più la pillola è lunga rispetto alla voce d’arrivo, più il taglio si stringe sopra e sotto, fino a SQUEEZE pixel: così, allungata, sembra tirata.
Il rimbalzo e la luce
Un clic porta un valore da 3 a 0 con elastic.out: la pillola si stringe e si gonfia come una gelatina. La luce è un elemento bianco sfocato con translateX e scaleX presi dai due bordi.
Puntatore e tastiera
Solo il mouse fa l’anteprima (un dito non ha un «sopra»); il tasto Tab la fa con :focus-visible. Uscito il puntatore dalla barra, un delayedCall di BACK secondi riporta la pillola alla voce con aria-current="page".
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LEAD | script.js | 0.34 | I secondi del bordo davanti. |
TRAIL | script.js | [0.1, 0.5] | Il bordo dietro: quanto aspetta e i suoi secondi. |
SQUEEZE | script.js | 3 | Di quanti pixel al massimo si assottiglia la pillola mentre si allunga. |
GLOW | script.js | 0.22 | Quanto è forte la luce sotto la pillola. |
BACK | script.js | 0.2 | I secondi che la pillola aspetta, dopo che il puntatore è uscito, prima di tornare. |
Quando usarla
Per la barra di navigazione di un sito o di un’app con quattro o cinque voci brevi, o per un selettore a schede. Con molte voci o nomi lunghi la barra non sta più in un telefono.
Sul telefono
La barra si stringe (voci più piccole, meno spazio) e sta in uno schermo da 390 pixel. Senza puntatore niente anteprima: il tocco sposta la pillola e fa della voce la pagina corrente.
Con il movimento ridotto
La pillola salta da una voce all’altra senza viaggiare e senza rimbalzo, e all’arrivo è già al suo posto.
Trappole
- La copia nera deve avere le stesse misure delle voci chiare (stesso carattere, peso e spaziatura): con un peso diverso le parole nere non combaciano più con quelle sotto.
- Le posizioni vanno rimisurate quando il carattere è arrivato: Safari può dire che i caratteri sono pronti (document.fonts.ready) prima di averli scaricati, per questo c’è anche un ResizeObserver sulle voci. Misurate col carattere di riserva, la pillola si ferma un po’ accanto alle voci.
- Un clip-path con «round» tiene gli angoli tondi a qualunque lunghezza; allargare un elemento con scaleX invece schiaccerebbe gli angoli.
- I due tween dei bordi lavorano sullo stesso oggetto: prima di partire verso una voce nuova si fermano quelli vecchi (killTweensOf), sennò un bordo continua verso la voce di prima.
- Le posizioni si prendono con offsetLeft e offsetWidth, non con getBoundingClientRect: mentre la barra entra rimpicciolita, getBoundingClientRect darebbe le misure della barra piccola e la pillola resterebbe più larga della sua voce.
Librerie
GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 4,1 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 2 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.
