L’albero al guinzaglio

Alberi, Fisica, SVG, TransizioniGSAPImpegnativaPeso compresso: Demo 16 KBGSAP 28 KBGratisScarica lo zip

I progetti di uno studio di architettura in un albero di file: una cartella si apre su una molla e i suoi file escono da sotto di lei, vanno un poco oltre e tornano, mentre le linee dei rami si ridisegnano a ogni fotogramma. Un file preso e portato via resta in fondo al suo ramo, che diventa verde, lo segue e si aggancia alla cartella sotto la mano; lasciato lì, il ramo lo tira al suo posto nuovo, lasciato altrove lo riporta a casa.

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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The file tree on a leash</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/host-grotesk@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- an architecture studio's projects in a file tree: folders open on a spring, every branch line is drawn again
         each frame from where the rows really are, and a file carried away stays on the end of its branch, which
         hooks onto the folder under it and reels the file in when it is let go -->
    <section class="explorer" aria-labelledby="explorer-title" data-explorer data-autoclic>
      <header class="explorer__head">
        <h2 class="explorer__title" id="explorer-title">Projects</h2>
        <button class="explorer__tool" type="button" aria-label="Collapse all folders" title="Collapse all folders" data-collapse>
          <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4.75 2.5L8 5.75l3.25-3.25M4.75 13.5L8 10.25l3.25 3.25"/></svg>
        </button>
      </header>
      <div class="explorer__scroll" data-scroller>
        <div class="canvas" data-canvas>
          <svg class="lines" aria-hidden="true" focusable="false">
            <path class="lines__band" data-band/>
            <path class="lines__hole" data-hole/>
            <path class="lines__guides" data-guides/>
            <path class="lines__wire" data-wire/>
          </svg>
          <div class="tree" role="tree" aria-labelledby="explorer-title" aria-keyshortcuts="Control+X Control+V" data-tree></div>
        </div>
      </div>
      <div class="explorer__foot" data-foot>
        <div class="explorer__foot-in">
          <p class="explorer__note" data-note></p>
          <button class="explorer__undo" type="button" data-undo>Undo</button>
        </div>
      </div>
      <p class="sr" aria-live="polite" data-live></p>
    </section>
  </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.

45 valori da cambiare

Apri il Playground

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 «L’albero al guinzaglio» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco un pannello grigio chiaro, Projects, col pulsante che chiude tutte le cartelle e sotto l’archivio di uno studio di architettura: tre progetti (Riverside Pavilion, Harbour Baths, Hill House) con le cartelle Drawings e Models e i loro file (piante e sezioni in pdf, un modello 3dm, un preventivo xlsx, note md, un rilievo dwg, una foto jpg), ognuno con un’icona disegnata per il suo tipo, e le cartelle color manila. All’inizio è tutto chiuso, poi si aprono uno dopo l’altro Riverside Pavilion, i suoi Drawings e Harbour Baths; è scelto ground-floor-plan.pdf, su un foglio bianco che comincia dove finisce il suo ramo. Cliccando una cartella la freccetta gira e i file escono da sotto di lei come da una fessura, vanno un poco oltre il loro posto e tornano, mentre il tronco e i rametti curvi si allungano con loro; cliccandola di nuovo rientrano. Preso un file col mouse (o tenuto premuto un attimo col dito), la riga si stacca: il foglio si stringe intorno al nome e fa ombra, al suo posto resta un tratteggio e il suo ramo diventa verde e lo segue. Il ramo si aggancia alla cartella sotto la mano, che si colora con tutto quello che contiene: la cartella stessa se la mano è sulla sua riga, quella del file se la mano è su un file. Fermo un attimo sulla riga di una cartella, il file va a pendere appena sotto di lei su un ramo corto; fermo di più su una cartella chiusa, la cartella si apre da sola. Lasciato lì, il tratteggio si richiude, la cartella si apre se era chiusa, si apre un posto in ordine alfabetico e il ramo tira dentro il file, che arriva con la velocità che gli ha dato la mano; la cartella fa un cenno e in fondo al pannello compare Moved to … con Undo, che lo riporta indietro allo stesso modo. Lasciato fuori dall’albero, o con Esc, il ramo lo riporta a casa. Coi tasti: frecce, Home, Fine, Invio, e Ctrl+X e Ctrl+V per spostare un file.

Come funziona

Una fessura per ogni riga

Tutte le righe sono posizionate in assoluto da una sola formula: ogni riga ha una fessura alta quanto una riga moltiplicata per quanto sono aperte le sue cartelle (un numero da 0 a 1, e un poco di più quando la molla va oltre) e per quanto c’è lei stessa; le fessure si impilano dall’alto e la riga sta appoggiata al fondo della sua fessura, ritagliata con clip-path: inset. Così una cartella che si apre fa uscire i suoi file da sotto di sé, le cartelle dentro si aprono insieme, un file che arriva apre il suo posto e uno che parte lascia uno spazio che si richiude, e nessuna riga si sovrappone mai a un’altra.

Molle che si possono interrompere

L’apertura di ogni cartella è una molla smorzata (OPEN_SPRING aprendo, CLOSE_SPRING chiudendo) calcolata sul ticker di GSAP a passi di 1/240 di secondo, col passo del fotogramma limitato a 1/30; la velocità resta, così una cartella cliccata di nuovo a metà torna indietro senza scatti. La freccetta gira di 90 gradi per l’apertura, e quindi va oltre anche lei. Le righe che non si vedono hanno visibility: hidden, così Tab e i lettori di schermo non le trovano; quando niente si muove il ciclo si spegne.

I rami ridisegnati a ogni fotogramma

Un solo path SVG sotto le righe, rifatto dalle fessure a ogni fotogramma: per ogni cartella aperta un tronco sotto la freccetta e per ogni riga un rametto con una curva di 6 pixel (una quadratica), lungo quanto la riga è uscita, che si ferma un pixel prima del foglio della riga: il foglio della riga scelta comincia lì, e il ramo lo tiene.

Il guinzaglio

Preso un file (dopo 4 pixel col mouse, dopo PRESS secondi fermi col dito), la sua riga esce dalla formula e segue la mano con translate3d; la sua fessura resta aperta e tratteggiata. Il ramo verde va dalla radice della cartella sotto la mano (la cartella della riga, o la cartella stessa se è la sua riga) al foglio, e la radice scivola da una cartella all’altra su una molla (HOOK_SPRING). Mentre si porta un file nell’albero non si muove niente, così la riga sotto la mano è sempre quella mirata: fermo 0,14 secondi sulla riga di una cartella, il file viene tirato da una molla a pendere sulla riga sotto, col foglio allargato, e il ramo sbiadisce quando non ha posto per piegarsi; dopo HOLD secondi una cartella chiusa si apre da sola.

Il volo, l’annulla e i tasti

Lasciato su un’altra cartella, al posto del file resta uno spazio vuoto che si richiude, nella cartella si apre un posto dopo le cartelle in ordine di nome, e il rientro nuovo viene compensato nello spostamento orizzontale nello stesso fotogramma; poi una molla in due dimensioni (LAND_SPRING), partita con la velocità della mano, porta la riga nel posto, e il ramo verde sbiadisce sul rametto grigio. Undo rifà lo stesso volo all’indietro. L’albero segue lo schema ARIA tree con tabindex che si sposta (frecce, Home, Fine, destra apre o entra, sinistra chiude o risale, Invio sceglie o apre) e Ctrl+X, Ctrl+V spostano un file; un clic da script (l’anteprima) porta un file in un altro progetto, annulla, chiude tutto e riapre le cartelle dell’inizio.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`OPEN_SPRING`	script.js	`[260, 0.6]`	La molla di una cartella che si apre: quanto è rigida e quanto è frenata (sotto 1 i file vanno un poco oltre e tornano).
`CLOSE_SPRING`	script.js	`[420, 1]`	La molla di una cartella che si chiude.
`LAND_SPRING`	script.js	`[230, 0.74]`	La molla che porta un file lasciato al suo posto, in fondo al suo ramo.
`HOOK_SPRING`	script.js	`[620, 0.9]`	La molla della radice del ramo che scivola da una cartella all’altra sotto il file portato, e del file che va a pendere sotto una cartella.
`HOLD`	script.js	`0.6`	I secondi sopra una cartella chiusa, portando un file, prima che si apra da sola.
`PRESS`	script.js	`0.3`	Su uno schermo da toccare, i secondi da tenere premuto un file prima che si stacchi.
`OPEN_AT_START`	script.js	`['Riverside Pavilion', 'Riverside Pavilion/Drawings', 'Harbour Baths']`	Le cartelle aperte all’inizio, col loro percorso.
`TREE`	script.js	`[['Riverside Pavilion', […]], …]`	I progetti: un nome e, per una cartella, quello che contiene.

Provali nel Playground

Quando usarla

Per l’esploratore dei file di un editor nel browser, l’archivio di uno studio, i documenti di un gruppo di lavoro, le risorse di un CMS: ovunque le cose si spostano da una cartella all’altra.

Sul telefono

Le righe sono alte 44 pixel e il pannello è largo al massimo 336; un tocco sceglie un file o apre una cartella. Per prendere un file lo si tiene premuto un attimo (PRESS): la riga si scurisce e poi si stacca, e prima di allora il dito che scorre fa scorrere la pagina; mentre il file è in mano la pagina sta ferma. Il pannello non supera 560 pixel: oltre, l’elenco scorre dentro, sotto il titolo compare una linea sottile e il file arrivato fuori vista viene portato in vista.

Con il movimento ridotto

Le cartelle si aprono e si chiudono subito e le righe che compaiono si accendono in dissolvenza; il file portato segue la mano, che è a muoverlo, ma lasciato va subito al suo posto e ci compare in dissolvenza, senza volo, la radice del ramo non scivola e la cartella non fa il cenno; la riga in fondo al pannello compare senza crescere.

Trappole

Aprire uno spazio sotto la cartella su cui il file si ferma sembrava il modo più chiaro, ma sposta le righe sotto la mano: passando da una cartella alla sua sottocartella lo spazio si richiudeva, le righe risalivano e il file finiva nella cartella sotto quella mirata. Mentre si porta un file nell’albero non si muove niente: il file va a pendere sopra la riga sotto, col foglio largo quanto la riga, e la copre tutta.
Con il file alla stessa altezza della cartella che lo tiene, il ramo diventava un ricciolo sotto la freccetta: il ramo sbiadisce quando il file non è almeno qualche pixel sotto la sua radice, e torna quando il file va a pendere sotto la cartella.
Le righe nascoste fin dall’inizio, dentro cartelle chiuse, non venivano mai segnate visibility: hidden perché il loro stato non cambiava: erano invisibili ma raggiungibili con Tab e dai lettori di schermo. Lo stato di partenza va lasciato indefinito, non falso.
Il foglio bianco del file sollevato aveva la transizione del colore: per un decimo di secondo era trasparente e il suo nome si leggeva sopra quello della riga sotto. Sollevato, il foglio diventa bianco subito.
Un file che passa in un’altra cartella cambia rientro e il contenuto della riga salterebbe di 16 pixel: lo spostamento orizzontale del volo viene corretto della stessa misura nello stesso fotogramma.
Il foglio della riga scelta copriva la fine del suo ramo: comincia dove il ramo finisce, un pixel dopo, e così il ramo lo tiene.
Spostare nel DOM la riga che ha il fuoco, per tenere l’ordine giusto ai lettori di schermo, le toglie il fuoco: dopo lo spostamento glielo si ridà.
Un dito che tiene premuto e poi si muove fa partire lo scorrimento della pagina, e il browser manda pointercancel: finché il file è in mano touchmove viene fermato con preventDefault, in un ascoltatore non passivo, e il menu del tocco lungo è spento.
L’anteprima ritaglia il pannello com’è a riposo: un giro che apriva un progetto chiuso lo allungava di 160 pixel e il fondo usciva dal video. Ora il giro porta il file fra due progetti già aperti e l’albero resta alto uguale.

Librerie

GSAP 3.15.0, Host Grotesk (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 16 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.