Il mega menu a tessere
Menu, Hover, 3D, Transizioni
NuovaGratis
Tutti i componenti
La barra laterale che si ripiega
La barra laterale chiara di una dashboard con il pulsante per ripiegarla: ogni nome si chiude a fisarmonica dietro la sua icona come una striscia di carta, una voce dopo l'altra dall'alto, mentre la barra si stringe alle sole icone. Da ripiegata, puntando un'icona il suo nome si spiega a fianco in un cartellino.
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 folding sidebar</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/geist@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the sidebar of a dashboard: the button at the top folds it down to its icons, and every name folds away behind
its icon like a strip of paper closing in a concertina, one after the other from the top; folded, the name of an
icon pointed at unfolds beside it as a little tag -->
<div class="fs-wrap" data-wrap>
<nav class="fs" aria-label="Main" data-nav data-autoclic>
<div class="fs__head">
<button class="fs__toggle" type="button" aria-expanded="true" aria-controls="fs-list" aria-label="Collapse sidebar" data-toggle>
<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="3"/><path d="M9 4V20"/><path class="fs__chev" d="M15.5 9.5L13 12L15.5 14.5"/></svg>
</button>
</div>
<div class="fs__body" data-body>
<span class="fs__mark" aria-hidden="true" data-mark></span>
<ul class="fs__list" id="fs-list">
<li><a class="fs__item" href="#" aria-current="page" data-item>
<svg class="fs__icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3.5" y="3.5" width="7" height="7" rx="2"/><rect x="13.5" y="3.5" width="7" height="7" rx="2"/><rect x="3.5" y="13.5" width="7" height="7" rx="2"/><rect x="13.5" y="13.5" width="7" height="7" rx="2"/></svg>
<span class="fs__label" data-label>Overview</span></a></li>
<li><a class="fs__item" href="#" data-item>
<svg class="fs__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 7.5A2 2 0 0 1 5 5.5H9.5L11.5 7.5H19A2 2 0 0 1 21 9.5V17.5A2 2 0 0 1 19 19.5H5A2 2 0 0 1 3 17.5Z"/><path d="M3 10.5H21"/></svg>
<span class="fs__label" data-label>Projects</span></a></li>
<li><a class="fs__item" href="#" data-item>
<svg class="fs__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6.5A2.5 2.5 0 0 1 6.5 4H17.5A2.5 2.5 0 0 1 20 6.5V14A2.5 2.5 0 0 1 17.5 16.5H10.5L6.5 20V16.5A2.5 2.5 0 0 1 4 14Z"/><path d="M8 9H16M8 12.5H13"/></svg>
<span class="fs__label" data-label>Messages</span>
<span class="fs__badge" data-badge>4<span class="fs__sr"> unread</span></span></a></li>
<li><a class="fs__item" href="#" data-item>
<svg class="fs__icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3.5" y="5" width="17" height="15.5" rx="2.5"/><path d="M3.5 9.5H20.5M8 3V6.5M16 3V6.5"/></svg>
<span class="fs__label" data-label>Calendar</span></a></li>
<li><a class="fs__item" href="#" data-item>
<svg class="fs__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 20H20"/><path d="M7 16.5V11M12 16.5V6.5M17 16.5V13.5"/></svg>
<span class="fs__label" data-label>Reports</span></a></li>
<li><a class="fs__item" href="#" data-item>
<svg class="fs__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5.1L13.76 3.17L15.44 3.69L15.83 6.26L16.88 7.12L19.48 7L20.31 8.56L18.77 10.65L18.9 12L20.83 13.76L20.31 15.44L17.74 15.83L16.88 16.88L17 19.48L15.44 20.31L13.35 18.77L12 18.9L10.24 20.83L8.56 20.31L8.17 17.74L7.12 16.88L4.52 17L3.69 15.44L5.23 13.35L5.1 12L3.17 10.24L3.69 8.56L6.26 8.17L7.12 7.12L7 4.52L8.56 3.69L10.65 5.23Z"/><circle cx="12" cy="12" r="2.8"/></svg>
<span class="fs__label" data-label>Settings</span></a></li>
</ul>
</div>
</nav>
<!-- the name of an icon pointed at while the bar is folded: a little tag that unfolds beside it -->
<span class="fs__tip" aria-hidden="true" data-tip></span>
</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.
24 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 che si ripiega» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una barra laterale chiara con gli angoli tondi: in cima un pulsante col disegno di una barra, sotto Overview, Projects, Messages con un badge viola col 4, Calendar, Reports e Settings, ognuna con la sua icona a tratto. Sotto Overview c'è un fondo lilla, e la sua icona è viola. All'arrivo i nomi si spiegano uno dopo l'altro dall'alto mentre la barra si allarga. Premendo il pulsante in cima la freccina si gira e ogni nome si ripiega: è tagliato in tre pannelli incernierati uno all'altro, che si girano in versi opposti come una striscia di carta chiusa a fisarmonica, finché il nome sparisce dietro la sua icona; i pannelli girati via dalla luce si scuriscono, quelli girati verso la luce si schiariscono, così si vedono le pieghe. Le voci si chiudono una dopo l'altra dall'alto e la barra si stringe insieme a loro fino alla larghezza delle icone, mentre il badge scivola sull'angolo dell'icona di Messages. Premendo di nuovo, i nomi si srotolano dall'alto e la barra si riallarga. Da ripiegata, puntando un'icona col mouse o arrivandoci col Tab, il suo nome esce a fianco in un cartellino scuro che si spiega anch'esso a fisarmonica; passando a un'altra icona il cartellino si richiude, scende e si rispiega col nome nuovo. Scegliendo una pagina, il fondo lilla ci scivola allungandosi un poco nel verso in cui va.
Come funziona
Il nome tagliato in pannelli
Lo script legge il nome di ogni voce, lo misura e costruisce PANELS pannelli larghi un terzo ciascuno: ogni pannello mostra la sua fetta della parola intera (lo stesso testo spostato a sinistra di k volte la larghezza) e contiene il pannello dopo sul suo bordo destro, così girarne uno porta con sé tutti quelli dopo. Il nome vero resta nel link, nascosto alla vista, per i lettori di schermo.
La fisarmonica
Con q da 0 (steso) a 1 (chiuso) l'angolo è a = 88° · q: il primo pannello gira di +a con rotateY sulla cerniera a sinistra, il secondo di −2a rispetto al primo, il terzo di +2a, così stanno a +a, −a, +a e la striscia è larga w·cos(a). Ogni pannello ha il fondo della sua riga e un velo in sfumatura che cresce col seno dell'angolo, scuro per quelli girati via dalla luce e chiaro per gli altri; negli ultimi gradi la striscia sbiadisce, per non lasciare righe di taglio.
La barra legata alle pieghe
Le voci hanno ognuna il suo q, animato da un solo gsap.to con stagger di STAGGER secondi, dall'alto in tutti e due i versi. A ogni fotogramma la larghezza della barra è SHUT + (OPEN − SHUT) per il coseno più grande fra le voci, cioè segue il nome più aperto e non ne taglia mai uno; il fondo della voce scelta e il badge si ricalcolano dalla stessa larghezza, il badge scivolando verso l'angolo dell'icona col q della sua riga.
Il cartellino
Da ripiegata, il nome dell'icona puntata o raggiunta col Tab viene tagliato negli stessi pannelli dentro un cartellino scuro accanto alla barra, che si spiega da q = 1 a 0 in TIP_FOLD secondi con back.out; la sua punta compare solo a cartellino quasi aperto. Passando a un'altra icona si richiude, scende e si rispiega; Esc lo chiude, e col tocco resta fuori un secondo e mezzo.
Il fondo che scivola e i tasti
Il fondo sotto la pagina scelta va alla sua riga in SLIDE secondi, allungandosi del 18% dal lato da cui parte e ricompattandosi con back.out all'arrivo. Il pulsante ha aria-expanded, aria-controls e un'etichetta che dice cosa farà; i link hanno aria-current. L'anteprima della libreria fa un giro: sceglie, ripiega, mostra un cartellino, riapre.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PANELS | script.js | 3 | In quanti pannelli si piega ogni nome. |
FOLD | script.js | 0.62 | I secondi che un nome ci mette a piegarsi o a spiegarsi. |
STAGGER | script.js | 0.06 | I secondi fra un nome e il successivo, dall'alto. |
TIP_FOLD | script.js | 0.42 | I secondi che il cartellino accanto a un'icona ci mette a spiegarsi. |
SLIDE | script.js | 0.45 | I secondi che il fondo sotto la pagina scelta ci mette a scivolare lì. |
Quando usarla
Per la barra laterale di una dashboard, di un gestionale, di un'app di progetti o di messaggi, di un pannello di amministrazione: ovunque serva lasciare spazio al contenuto senza perdere la navigazione.
Sul telefono
La barra aperta è larga 236 pixel e sta nello schermo insieme al cartellino; ogni voce è alta 44 pixel. Da ripiegata, toccare un'icona sceglie la pagina e fa uscire il suo nome per un secondo e mezzo.
Con il movimento ridotto
Niente pieghe e niente scivolate: i nomi e il cartellino compaiono e spariscono in dissolvenza, la barra prende subito la sua larghezza e il fondo sotto la pagina scelta salta alla sua riga.
Trappole
- Con i pannelli trasparenti le ombre delle pieghe sembravano scatole grigie sopra la barra: ogni pannello ha il fondo della sua riga (quello della barra, quello lilla della pagina scelta o quello del puntatore, preso da una variabile CSS), così le sfumature si leggono come carta piegata.
- Fra un pannello e l'altro restava una riga chiara di un pixel per gli arrotondamenti: ogni faccia sborda di 0,6 pixel sotto la successiva, tranne l'ultima.
- Il testo tagliato in pannelli si ripete tre volte e i lettori di schermo l'avrebbero letto tre volte: i pannelli sono aria-hidden e il nome vero resta nel link, nascosto solo alla vista.
- La freccina del pulsante, girata con scaleX in CSS, finiva fuori dall'icona: la gira GSAP con transformOrigin, che per gli SVG calcola il centro giusto del tracciato.
- La larghezza dei nomi va misurata quando il carattere è arrivato: con document.fonts.ready i pannelli si ritagliano alla larghezza vera.
Librerie
GSAP 3.15.0, Geist (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,9 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 5 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.
