L’albero dei file

Alberi, Transizioni, FisicaGSAPMediaPeso compresso: Demo 6,5 KBGSAP 28 KBGratisScarica lo zip

I file di un progetto in un albero: una cartella si apre piegando il coperchio e girando la freccetta, i suoi file scendono uno dopo l’altro mentre la linea che li appende si disegna; una sola evidenziazione scivola su una molla fino alla voce scelta, allungandosi un poco, un file nuovo scrive il suo nome lettera per lettera e uno cancellato si richiude.

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</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/encode-sans@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the file tree: folders open with their lid lifting and their files coming down one after another, a single
         highlight slides to the item chosen, and a new file writes its own name -->
    <section class="files" aria-labelledby="files-title" data-files data-autoclic>
      <header class="files__head">
        <h2 class="files__title" id="files-title">Explorer</h2>
        <button class="files__new" type="button" data-new>
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 6v12M6 12h12"/></svg>
          New file
        </button>
      </header>
      <div class="tree" data-tree>
        <span class="tree__mark" aria-hidden="true" data-mark></span>
        <ul class="tree__root" role="tree" aria-labelledby="files-title" data-root></ul>
      </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.

34 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 dei file» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco un pannello chiaro: Explorer col bottone New file e sotto l’albero di un sito (website, src con components e pages, public con images, package.json, README.md), con le cartelle gialle e i file con un’etichetta del colore del loro tipo. All’inizio sono aperte website, src e pages, ed è scelto index.astro. Cliccando una cartella la freccetta gira con un rimbalzo, il coperchio si piega all’indietro come in una cartella aperta, lo spazio si apre e i file entrano da sinistra uno dopo l’altro, mentre la linea che li appende alla cartella si disegna dall’alto; cliccandola di nuovo si richiude. Cliccando una voce l’evidenziazione azzurra ci scivola sopra su una molla, allungandosi un poco mentre corre, e la segue mentre le cartelle sopra si aprono e si chiudono. New file crea notes.md (notes-2.md se c’è già) nella cartella scelta o in quella del file scelto: la riga si apre e il nome si scrive da solo dietro un cursore che lampeggia e se ne va. Canc o Backspace cancellano il file scelto, che si richiude scivolando di lato; le cartelle non si cancellano.

Come funziona

Aprire una cartella

Il gruppo dei figli parte da altezza zero e va all’altezza letta da scrollHeight in OPEN secondi con power3.out; alla fine l’altezza scritta viene tolta (clearProps), così un file aggiunto dopo non resta fuori. Intanto i figli entrano da sinistra a CASCADE secondi l’uno dall’altro e la variabile --hang porta da 0 a 1 la scala verticale della linea che li appende. Chiudendo, l’altezza torna a zero e il gruppo viene nascosto.

Freccetta e coperchio

La freccetta gira di 90 gradi con back.out; il coperchio della cartella, un pezzo a parte dello stesso SVG, si inclina (skewX) e si accorcia (scaleY) attorno al suo bordo basso, come una cartella aperta.

Una sola evidenziazione

Sotto le voci c’è un solo rettangolo, mosso da una molla (GLIDE) calcolata sul ticker di GSAP a passi di 4 millisecondi verso la posizione della voce scelta, riletta a ogni fotogramma: così la segue anche mentre le cartelle sopra cambiano altezza. Più va veloce più si allunga in verticale, fino a circa un terzo; il ticker si ferma quando è arrivato e nessuna cartella si sta muovendo.

Il file nuovo e quello cancellato

Il file nuovo va nella cartella scelta, che si apre; la sua riga cresce da zero a 32 pixel e un tween su un numero scrive il nome lettera per lettera (TYPE secondi a lettera) davanti a un cursore, che lampeggia e viene tolto. Il file cancellato va ad altezza zero scivolando di lato e, se era scelto, l’evidenziazione passa alla voce dopo (o a quella prima).

Tasti e anteprima

L’albero segue lo schema ARIA tree: un solo posto nel Tab, la voce scelta indicata da aria-activedescendant, frecce su e giù, Home e Fine, destra che apre o entra, sinistra che chiude o risale, Invio e spazio che aprono e chiudono, Canc che cancella; coi tasti l’anello del fuoco sta sull’evidenziazione e viaggia con lei. Un clic da script (l’anteprima della libreria) è una mano finta che sceglie file, apre e chiude cartelle, crea un file e poi lo cancella, e torna all’inizio.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`OPEN`	script.js	`0.38`	I secondi che una cartella impiega ad aprirsi (a chiudersi un po’ meno).
`CASCADE`	script.js	`0.04`	I secondi fra l’arrivo di un file e quello dopo.
`GLIDE`	script.js	`[420, 0.78]`	La molla dell’evidenziazione: quanto è rigida e quanto è frenata.
`TYPE`	script.js	`0.06`	I secondi che il nome di un file nuovo impiega per ogni lettera.
`TREE`	script.js	`['website', [['src', […]], …]]`	I file: un nome e, per una cartella, quello che contiene.

Provali nel Playground

Quando usarla

Per un editor nel browser, il gestore dei file di un’app, la documentazione di un progetto, un indice annidato, un menu a più livelli, le categorie di un negozio.

Sul telefono

Le voci si toccano col dito; il pannello è largo al massimo 360 pixel e sta appeso in alto, così crescendo e calando non salta; i tocchi non aspettano il doppio tocco (touch-action manipulation).

Con il movimento ridotto

Le cartelle si aprono e si chiudono subito, l’evidenziazione va alla voce senza molla e senza allungarsi, il file nuovo compare col nome già scritto e quello cancellato sparisce subito; niente entrata.

Trappole

In cima a uno script classico una costante chiamata top dà errore, perché window.top esiste già e non si può dichiarare di nuovo: la radice dell’albero si chiama tree0.
Animare l’altezza fino a un numero letto da scrollHeight lascia quel numero scritto sul gruppo: va tolto alla fine (clearProps), o un file aggiunto dopo resterebbe fuori.
Un’evidenziazione mandata alla posizione letta al clic arriva nel posto sbagliato se intanto una cartella sopra si apre: la posizione della voce va riletta a ogni fotogramma finché qualcosa si muove.
Un pannello centrato nella pagina, quando cresce, si sposta di metà della crescita e la testata salta: va appeso in alto.
Con aria-activedescendant il fuoco resta sull’albero e le voci non lo ricevono una per una: l’anello del fuoco va disegnato a mano, qui sull’evidenziazione.

Librerie

GSAP 3.15.0, Encode Sans (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 6,5 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 3 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.