Il pulsante d'acqua
Pulsanti, SVG, Fisica, Hover
NuovaGratis
Tutti i componenti
La barra laterale a strati di carta
La barra laterale della dashboard di una stamperia, fatta di cinque fogli di carta uno sull'altro, dal più chiaro in cima a un vermiglio pieno in fondo. Intorno alla pagina in cui si è i quattro fogli di sopra sono fustellati, ognuno con un buco un poco più piccolo di quello sopra, e la pagina sta in fondo a un pozzo a gradini con l'ombra sotto ogni bordo. Scegliendone un'altra, il buco di ogni foglio ci scivola su una molla sua: prima quello in cima, poi i più profondi, così il pozzo nuovo si apre un foglio dopo l'altro mentre il vecchio si richiude dall'alto. Col puntatore su una voce il foglio di sopra apre sotto di lei un vassoio basso.
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 layered paper sidebar</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the sidebar of a print studio's dashboard, made of five sheets of paper laid one on the other, from the palest
on top to a deep vermilion at the bottom. Round the page you are on, a hole is cut through the four top sheets,
each one a little smaller than the one above, so the page sits at the bottom of a stepped well. Choosing
another page, every sheet's hole slides there on a spring of its own, the top one first and the deeper ones
after: the new well is punched through sheet after sheet while the old one closes from the top. The sheets
are rectangles cut by masks, redrawn every frame; the links on top are the real navigation -->
<nav class="side" aria-label="Studio" data-side>
<svg class="paper" aria-hidden="true" data-paper>
<defs>
<filter id="paper-cast" x="-5%" y="-5%" width="110%" height="110%">
<feDropShadow dx="0" dy="1.8" stdDeviation="1.7" flood-color="#4a1a0a" flood-opacity="0.42"/>
</filter>
<mask id="paper-hole-3" maskUnits="userSpaceOnUse"><rect class="paper__full" data-full/><rect class="paper__cut" data-cut/></mask>
<mask id="paper-hole-2" maskUnits="userSpaceOnUse"><rect class="paper__full" data-full/><rect class="paper__cut" data-cut/></mask>
<mask id="paper-hole-1" maskUnits="userSpaceOnUse"><rect class="paper__full" data-full/><rect class="paper__cut" data-cut/></mask>
<mask id="paper-hole-0" maskUnits="userSpaceOnUse"><rect class="paper__full" data-full/><rect class="paper__cut" data-cut/><g data-shallow></g></mask>
</defs>
<rect class="paper__base" data-full/>
<g filter="url(#paper-cast)"><rect class="paper__sheet paper__sheet--3" mask="url(#paper-hole-3)" data-full data-sheet/></g>
<g filter="url(#paper-cast)"><rect class="paper__sheet paper__sheet--2" mask="url(#paper-hole-2)" data-full data-sheet/></g>
<g filter="url(#paper-cast)"><rect class="paper__sheet paper__sheet--1" mask="url(#paper-hole-1)" data-full data-sheet/></g>
<g filter="url(#paper-cast)"><rect class="paper__sheet paper__sheet--0" mask="url(#paper-hole-0)" data-full data-sheet/></g>
</svg>
<p class="group" id="group-studio">Studio</p>
<ul class="list" aria-labelledby="group-studio">
<li><a class="item" href="#" aria-current="page" data-item>
<svg class="item__icon" viewBox="0 0 20 20" aria-hidden="true"><path d="M3.5 6.5 10 3.2l6.5 3.3v7L10 16.8l-6.5-3.3zM3.5 6.5 10 9.8l6.5-3.3M10 9.8v7"/></svg>
<span class="item__name">Orders</span>
</a></li>
<li><a class="item" href="#" data-item data-autoclic>
<svg class="item__icon" viewBox="0 0 20 20" aria-hidden="true"><path d="M5 2.8h7l3 3v11.4H5zM12 2.8v3h3M7.6 11.2l1.7 1.7 3.3-3.6"/></svg>
<span class="item__name">Proofs</span>
<span class="item__count">3</span>
</a></li>
<li><a class="item" href="#" data-item>
<svg class="item__icon" viewBox="0 0 20 20" aria-hidden="true"><path d="M3.2 12.6 10 16l6.8-3.4M3.2 9.6 10 13l6.8-3.4M10 3.4l6.8 3.3L10 10 3.2 6.7z"/></svg>
<span class="item__name">Paper stock</span>
</a></li>
<li><a class="item" href="#" data-item data-autoclic>
<svg class="item__icon" viewBox="0 0 20 20" aria-hidden="true"><path d="M7.6 9.4a2.9 2.9 0 1 0 0-5.8a2.9 2.9 0 0 0 0 5.8zM2.6 16.4c.6-2.9 2.5-4.4 5-4.4s4.4 1.5 5 4.4M13.2 3.9a2.7 2.7 0 0 1 0 5.2M14.6 12.3c1.6.5 2.5 1.8 2.8 4.1"/></svg>
<span class="item__name">Clients</span>
</a></li>
</ul>
<p class="group" id="group-office">Office</p>
<ul class="list" aria-labelledby="group-office">
<li><a class="item" href="#" data-item data-autoclic>
<svg class="item__icon" viewBox="0 0 20 20" aria-hidden="true"><path d="M5 2.8h10v14.4l-2-1.3-1.7 1.3-1.3-1.3-1.3 1.3L7 15.9l-2 1.3zM7.6 7h4.8M7.6 10h4.8M7.6 13h2.6"/></svg>
<span class="item__name">Invoices</span>
</a></li>
<li><a class="item" href="#" data-item>
<svg class="item__icon" viewBox="0 0 20 20" aria-hidden="true"><path d="M3.5 6h13M3.5 14h13M7.5 3.9v4.2M12.5 11.9v4.2"/></svg>
<span class="item__name">Settings</span>
</a></li>
</ul>
</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.
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 barra laterale a strati di carta» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una barra laterale color crema larga 252 pixel e alta circa 390, con gli angoli tondi e un'ombra morbida. Dentro, due gruppi di voci con le loro icone sottili: Studio (Orders, Proofs col numero 3, Paper stock, Clients) e Office (Invoices, Settings). Intorno alla voce scelta, Orders, la carta è tagliata: si vedono quattro gradini, pesca chiaro, pesca, corallo e in fondo un vermiglio pieno, ognuno con un'ombra sottile sotto il bordo di sopra, e il nome della voce, chiaro, sta sul fondo rosso. All'arrivo la barra sale di qualche pixel e il pozzo si apre dalla linea di mezzo, un foglio dopo l'altro. Scegliendo un'altra voce il taglio del foglio di sopra parte per primo, col bordo davanti che va un attimo prima di quello dietro, così il buco si allunga per strada e poi si richiude alla misura della voce; i fogli sotto lo seguono ognuno un poco più tardi, e si vedono i gradini scorrere sfalsati come un cannocchiale. Sulla voce nuova il pozzo si scava foglio dopo foglio e il nome diventa chiaro quando arriva il fondo; sulla vecchia il pozzo si richiude dall'alto. Col mouse su un'altra voce il foglio di sopra si apre dalla linea di mezzo in un vassoio basso color pesca; da tastiera la voce col fuoco ha il vassoio e un contorno sottile, e le frecce su e giù passano da una voce all'altra.
Come funziona
Cinque fogli, quattro maschere
Dentro un SVG dietro le voci c'è un rettangolo vermiglio, il fondo, e sopra quattro rettangoli grandi quanto la barra, dal corallo al crema. Ognuno ha una maschera: un rettangolo bianco che tiene la carta e un rettangolo nero coi bordi tondi che la taglia. Con la maschera due buchi che si sovrappongono (il pozzo che passa sopra il vassoio del puntatore) restano un buco solo: con un tracciato e la regola evenodd la parte comune si richiudeva.
L'ombra di ogni taglio
Ogni foglio sta in un gruppo con un feDropShadow verso il basso. Il filtro di un gruppo lavora sul foglio già tagliato dalla maschera, quindi l'ombra nasce dal bordo del buco e cade sul foglio di sotto, solo dentro il pozzo: è lei a far leggere i gradini come profondità.
Il taglio che va e i fogli che lo seguono
Dove va il taglio lo dicono due tween di GSAP, uno per il bordo di sopra e uno per quello di sotto, con un power3.inOut lungo TRAVEL; il bordo davanti parte subito e quello dietro dopo LEAD del viaggio, così il buco si allunga e poi si richiude. Il buco di ogni foglio insegue il taglio su una molla sua (SPRING), più morbida quanto più il foglio è profondo (LAG), rientrato di STEP pixel per gradino. I fogli profondi arrivano dopo: il pozzo nuovo si scava e il vecchio si richiude dall'alto da soli.
Il vassoio del puntatore
Ogni voce ha un secondo buco nella maschera del solo foglio di sopra, alto zero a riposo. Col puntatore, il dito giù o il fuoco da tastiera una molla lo apre dalla sua linea di mezzo fino alla misura della voce: si vede il foglio pesca sotto, con l'ombra, senza scavare il pozzo.
Il nome sul fondo
Il nome della voce scelta diventa chiaro (la classe is-deep) solo quando il buco del foglio più profondo è sotto di lei, alto almeno metà della voce e centrato: durante il viaggio resta scuro e si legge su ogni foglio. Le voci sono link veri con aria-current="page"; le frecce, Home e Fine spostano il fuoco.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
START | script.js | 0 | La voce scelta quando si apre la barra (0 è la prima). |
STEP | script.js | 4.2 | Quanto è più piccolo il buco di ogni foglio rispetto a quello sopra, in pixel: i gradini del pozzo. |
TRAVEL | script.js | 0.42 | I secondi che il taglio del foglio di sopra impiega per scendere di una voce (per una lontana un poco di più). |
SPRING | script.js | [260, 22] | La molla del foglio di sopra dietro il taglio: quanto è rigida e quanto è frenata (meno frenata, va più oltre). |
LAG | script.js | 0.42 | Quanto in ritardo segue ogni foglio più profondo quello sopra (0, tutti insieme). |
LEAD | script.js | 0.22 | Quanto prima parte il bordo davanti del buco, come parte del viaggio: per strada il buco si allunga. |
SHALLOW | script.js | true | Il puntatore apre un vassoio basso nel solo foglio di sopra. |
Quando usarla
Per la barra laterale di una dashboard o di un'app con cinque, sei o otto pagine: una stamperia, uno studio di grafica, una cartoleria, chi lavora con la carta e vuole un'interfaccia calda e fatta a mano. Il pozzo si legge bene su ogni colore: i cinque fogli sono variabili, dal più chiaro in cima al più scuro in fondo.
Sul telefono
La barra è larga 252 pixel e alta circa 390: a 390 pixel sta intera nello schermo. Col dito giù su una voce il foglio di sopra apre il suo vassoio, come col mouse sopra, e il tocco la sceglie.
Con il movimento ridotto
Niente buchi che scorrono e niente vassoio: scegliendo un'altra voce il pozzo compare già scavato sotto di lei, in una breve dissolvenza. All'apertura la barra compare in dissolvenza col pozzo già al suo posto.
Trappole
- Coi buchi fatti come tracciati con la regola evenodd, il vassoio del puntatore e il pozzo che gli passava sopra si annullavano a vicenda e la parte comune tornava di carta. Ora ogni foglio ha una maschera, e i rettangoli neri si sommano.
- Con le sole molle, da lontano il buco partiva di scatto e in sessanta millisecondi era già arrivato: non si vedeva niente. Ora il taglio va con due tween con la partenza dolce e le molle servono solo ai fogli che lo seguono.
- Il nome di una voce diventava chiaro mentre il pozzo le passava sopra, e per un attimo spariva sul crema. Ora diventa chiaro solo la voce scelta, quando il fondo è arrivato.
- Con gradini di 3,4 pixel e un'ombra leggera il pozzo sembrava una pillola piatta con un bordino: i gradini ora sono di 4,2 di lato (un po' meno sopra e sotto, così il nome ha posto) e l'ombra è più scura.
Librerie
GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,0 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 19 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.
