Il pulsante che copia
Pulsanti, Testo, SVG, Fisica
NuovaGratis
Tutti i componenti
Le briciole che si riavvolgono
Le briciole di pane di un drive fatte come un metro avvolgibile: il percorso è il nastro e il gancio giallo in fondo tira fuori le cartelle nuove da sotto l'ultima freccia. Scegliendo una cartella più su, il nastro dopo di lei si riavvolge dentro la sua freccia, che si apre come una bocca: le lettere più vicine si allargano e ci scivolano sotto per prime, e il gancio arriva per ultimo con uno scatto.
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 rewinding breadcrumbs</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/albert-sans@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the breadcrumbs of a studio's file drive, made like a tape measure: the path is a tape and the yellow hook at
its end pulls new folders out from under the last chevron. Going up, the tape rewinds into the chevron after
the folder chosen, letter by letter, and the hook comes home last. Each letter is a weight on a string worked
out on every frame; the chevrons are the slots the tape slips under -->
<div class="frame" data-frame>
<nav class="crumbs" aria-label="Breadcrumb" data-crumbs data-autoclic>
<span class="crumbs__case" aria-hidden="true" data-case></span>
<div class="crumbs__strip" data-strip>
<ol class="crumbs__list" data-list>
<li class="crumb crumb--root" data-id="files">
<a class="crumb__link" href="#">
<svg class="crumb__icon" viewBox="0 0 20 20" aria-hidden="true">
<path d="M5.5 4.5h9a2.5 2.5 0 0 1 2.5 2.5v6a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 3 13V7a2.5 2.5 0 0 1 2.5-2.5z"/>
<path d="M3 10.6h14M12.6 13h1.8"/>
</svg>
<span class="crumb__name"><span class="crumb__text">Files</span></span>
</a>
<span class="crumb__sep" aria-hidden="true" data-sep>
<svg viewBox="0 0 24 24"><path d="M9.5 7l5 5-5 5"/></svg>
</span>
<!-- on a narrow screen the middle folders are wound up in the first chevron: this shows them again -->
<button class="crumb__spool" type="button" aria-expanded="false" hidden data-spool></button>
</li>
<li class="crumb" data-id="projects">
<a class="crumb__link" href="#"><span class="crumb__name"><span class="crumb__text">Projects</span></span></a>
<span class="crumb__sep" aria-hidden="true" data-sep><svg viewBox="0 0 24 24"><path d="M9.5 7l5 5-5 5"/></svg></span>
</li>
<li class="crumb" data-id="harbour">
<a class="crumb__link" href="#"><span class="crumb__name"><span class="crumb__text">Harbour Museum</span></span></a>
<span class="crumb__sep" aria-hidden="true" data-sep><svg viewBox="0 0 24 24"><path d="M9.5 7l5 5-5 5"/></svg></span>
</li>
<li class="crumb" data-id="exhibition">
<a class="crumb__link" href="#" aria-current="page"><span class="crumb__name"><span class="crumb__text">Exhibition</span></span></a>
<span class="crumb__sep" aria-hidden="true" data-sep><svg viewBox="0 0 24 24"><path d="M9.5 7l5 5-5 5"/></svg></span>
</li>
</ol>
<!-- the hook at the end of the tape: it shows the folders inside the current one -->
<button class="hook" type="button" aria-expanded="false" aria-controls="crumbs-folders" data-hook>
<span class="hook__body" aria-hidden="true">
<span class="hook__plate" data-plate></span>
<svg class="hook__chevron" viewBox="0 0 24 24"><path d="M9.5 7 L14.5 12 L9.5 17"/></svg>
</span>
</button>
<div class="kids" id="crumbs-folders" role="group" hidden data-kids></div>
</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.
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 «Le briciole che si riavvolgono» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco, da sola, la barra grigio chiaro col percorso di un drive di uno studio grafico: l'icona del disco con Files, poi Projects, Harbour Museum ed Exhibition, la cartella in cui si è, scritta in nero; fra una cartella e l'altra una freccia grigia, e in fondo al percorso un gancio, un quadratino giallo con la sua freccia, come il gancio di un metro avvolgibile. All'arrivo c'è solo Files col gancio accanto: il gancio tira e il percorso intero esce da sotto la prima freccia come un nastro, con le lettere tese e un po' distanziate che si ricompattano quando il gancio si ferma. Puntando una cartella più su, le cartelle dopo di lei sbiadiscono e si sporgono di qualche pixel verso la sua freccia, che diventa nera: è quello che si lascerebbe. Scegliendola, la sua freccia si apre come una bocca e il nastro ci si riavvolge dentro: il rullo tira da sotto la freccia, quindi le lettere più vicine si allargano e ci scivolano sotto per prime, tagliate lungo la forma della freccia, il resto le segue sempre più veloce e il gancio arriva per ultimo, si schiaccia nello scatto e copre la freccia. Il gancio mostra le cartelle dentro quella in cui si è: premuto si abbassa, la sua freccia si piega verso il basso e le cartelle escono da sotto di lui come una striscia; scegliendone una, la striscia rientra sotto il gancio e il gancio tira fuori la cartella nuova da sotto la freccia. Una cartella senza cartelle dentro ha il gancio grigio, che scuote la testa se lo si preme. Il bordo destro della barra segue il gancio. Su un telefono il percorso lungo si raccoglie: le cartelle di mezzo si avvolgono dentro la prima freccia, che mostra una freccia in più per ogni cartella che tiene; toccata, le srotola e la striscia scorre di lato.
Come funziona
Ogni lettera al suo posto
Le parole a riposo sono testo normale. Quando il nastro parte, ogni parola che ci sta sopra viene ricopiata lettera per lettera in tanti span assoluti, messi esattamente dove il browser aveva messo le sue lettere: la posizione di ognuna si legge con un Range su un carattere alla volta, quindi la crenatura resta. Il testo sotto diventa invisibile ma tiene la misura, e alla fine le copie spariscono.
Una corda di pesi
Ogni lettera, ogni freccia e il gancio sono un peso su una corda calcolata a passi di mezzo millesimo di secondo (più corti per una corda più rigida, che altrimenti esplode), col passo del fotogramma limitato a 1/30 di secondo. La corda tira soltanto, come uno spago: dove è tesa le lettere si allargano. E le lettere non possono mai avvicinarsi più di come stanno nella parola: quando il nastro si ferma si urtano e rimbalzano, dividendosi il colpo come due pesi.
Il rullo e il gancio
Riavvolgendo, un punto invisibile sotto la freccia tira il nastro con una tween di GSAP che parte subito e accelera; scendendo, tira il gancio, con una tween che si avvia in pochi centesimi e poi frena. Il piano su cui scorre il nastro fa attrito, così le lettere più lontane da chi tira restano indietro: si allargano quelle vicine alla freccia quando il nastro rientra, quelle vicine al gancio quando esce.
La freccia che taglia
Ogni cartella sul nastro ha un clip-path a poligono col profilo della freccia in cui entra: quello che sta a sinistra del profilo è sotto la freccia. La lettera sparisce prima nel mezzo, sulla punta, poi sopra e sotto, come se scivolasse sotto una piastrina. Il percorso finale si misura prima di partire (nascondendo per un istante quello che se ne va), così quando il nastro si ferma tutto è già dove la pagina lo mette, al pixel.
Le cartelle di mezzo nella prima freccia
Se il percorso non entra, le cartelle di mezzo si avvolgono nella prima freccia con lo stesso nastro, lasciando le ultime due, e per ognuna la freccia guadagna una freccia in più, una pila che è anche il pulsante per srotolarle. Le voci sono link in una lista ordinata dentro un nav con aria-label Breadcrumb, quella corrente ha aria-current; il gancio è un button con aria-expanded. L'anteprima della libreria clicca la barra (un clic senza puntatore sul nav) e ogni clic fa una mossa di un piccolo giro su e giù per il drive.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
UNROLL | script.js | 0.55 | I secondi che il gancio ci mette a tirare fuori una cartella nuova (un po' di più per un nome lungo). |
REWIND | script.js | 0.4 | I secondi che il nastro ci mette a riavvolgersi nella freccia della cartella scelta. |
STRETCH | script.js | 1 | Quanto si allargano le lettere mentre il nastro corre (0 un metro d'acciaio rigido, 2 come una caramella mou). |
BOUNCE | script.js | 0.35 | Quanto rimbalzano le lettere l'una sull'altra quando il nastro si ferma (0 per niente). |
LEAN | script.js | 6 | Di quanti pixel le cartelle dopo quella puntata si sporgono verso la sua freccia. |
KEEP | script.js | 2 | Su uno schermo stretto, quante cartelle restano in fondo a un percorso lungo, oltre alla prima. |
Quando usarla
Per le briciole di pane di un'app dove si scende e si risale spesso: un drive, un gestionale di progetti, il catalogo di un negozio con le sue categorie, un manuale a capitoli. Il gancio in fondo fa anche da scorciatoia per scendere senza passare dalla pagina, e la pila di frecce tiene leggibile un percorso lungo su un telefono.
Sul telefono
La barra resta alta 56 pixel e larga al massimo quanto lo schermo meno 16 pixel per lato (358 su un telefono di 390); la prima cartella tiene solo la sua icona. Se il percorso non entra, le cartelle di mezzo si avvolgono nella prima freccia e restano le ultime due: con quattro livelli resta Files, una pila di due frecce, Harbour Museum ed Exhibition. Toccando la pila le cartelle si srotolano e la striscia scorre di lato, con i bordi che sfumano; le cartelle offerte dal gancio scorrono insieme alla striscia tenendo il gancio in vista, e scendendo il percorso fa spazio prima che il gancio tiri fuori la cartella nuova. Il dito giù su una cartella fa quello che fa il mouse sopra: le cartelle dopo sbiadiscono e si sporgono. Il gancio e la pila si toccano su 44 pixel.
Con il movimento ridotto
Niente nastro né lettere che si muovono: le cartelle che se ne vanno svaniscono, il gancio svanisce e ricompare al suo posto nuovo, la cartella nuova compare in dissolvenza; le cartelle offerte compaiono e spariscono in dissolvenza e la pila della prima freccia cambia senza spostarsi. Niente sporgenza, niente scatto e niente pressione che rimpicciolisce.
Trappole
- Il risolutore dei contatti spostava di metà ciascuna delle due lettere che si toccavano: la lettera spinta verso il gancio ne toccava un'altra già sistemata e il nastro restava compresso, con la prima parola che tornava al suo posto lentamente, due pixel in mezzo secondo. Ora si sposta solo la lettera più lontana da chi tira, in un'unica passata dal gancio (o dal rullo) verso l'altro capo.
- Il primo tentativo di quella correzione dava tutta la velocità del rimbalzo alla lettera spostata: ogni lettera ripartiva più veloce della vicina e lungo la fila la velocità si moltiplicava, fino a far volare le parole fuori dalla barra. La posizione si corregge da un lato solo, ma il colpo si divide fra i due pesi, e la quantità di moto si conserva.
- La freccia dopo l'ultima cartella si nasconde con :last-child, ma per misurare dove finisce il gancio le cartelle che se ne vanno erano solo nascoste: restavano figlie della lista, la freccia della cartella scelta contava ancora e alla fine il gancio scattava di 24 pixel. Nella misura ora si nasconde anche lei.
- Con la rigidezza al minimo (STRETCH 0) il passo di calcolo fisso di un millesimo di secondo era troppo lungo per la vibrazione più veloce della catena e il nastro esplodeva. Il passo ora si calcola dalla rigidezza.
- La freccia del gancio, girata di 90 gradi per dire «aperto», a metà giro sembrava una spunta. Ora il tracciato si piega dalla freccia a destra a quella in giù spostando i suoi punti, e a metà strada è un trattino; e i due tracciati sono scritti in coordinate assolute separate da spazi, perché interpolando «5-5» GSAP incollava i numeri in «50.26».
- Sul telefono la cornice si allargava al percorso, perché la colonna della griglia della pagina prendeva la misura del contenuto: il percorso non si raccoglieva mai e sforava. La colonna ora è minmax(0, 1fr).
- Puntando una cartella il nastro si sporge verso la freccia; al clic il rullo partiva dal nastro dritto e la prima lettera, troppo vicina, veniva spinta indietro: un saltino a destra prima di riavvolgere. Ora il rullo parte già tirato di quanto il nastro si sporgeva.
- Le cartelle offerte uscivano una dopo l'altra, ma partendo tutte dallo stesso punto sotto il gancio quelle dopo raggiungevano le prime e le coprivano. Ora escono insieme come una striscia sola, e sul telefono lo scorrimento laterale va insieme a lei invece di arrivare dopo.
Librerie
GSAP 3.15.0, Albert Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 15 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 6 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.
