La zona dei file

Moduli, Transizioni, SVGGSAPImpegnativaPeso compresso: Demo 8,3 KBGSAP 28 KBGratisScarica lo zip

Una cornice tratteggiata dove lasciare i file: con dei file sopra la pagina i fogli si aprono a ventaglio e i trattini si uniscono in una linea; lasciati, ogni file entra come una riga in cui ricade un foglio del suo colore, la barra si riempie e alla fine si disegna la spunta, oppure la riga diventa rossa se il file è troppo grande.

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 drop zone</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/figtree@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the drop zone: three sheets inside a dashed frame. Dragging files over the page the sheets fan out and the
         dashes join into a line; dropped (or chosen with a click), the files come down as rows that fill up while
         they upload, then close with a tick. The upload is pretended: see send() in the script -->
    <div class="drop" data-drop>
      <div class="drop__zone" role="button" tabindex="0" aria-describedby="drop-hint" data-zone data-autoclic>
        <svg class="drop__frame" aria-hidden="true" data-frame>
          <rect class="drop__dash" data-dash/>
        </svg>
        <div class="drop__art" aria-hidden="true" data-art>
          <span class="sheet sheet--back" data-sheet></span>
          <span class="sheet sheet--mid" data-sheet></span>
          <span class="sheet sheet--front" data-sheet>
            <svg viewBox="0 0 24 24"><path d="M12 17V7.5M7.5 11.5 12 7l4.5 4.5"/></svg>
          </span>
        </div>
        <p class="drop__title" data-title><span data-title-in>Drop files here or <span class="drop__browse">browse</span></span></p>
        <p class="drop__hint" id="drop-hint">PDF, images or zip, up to 20 MB each</p>
        <input class="drop__input" type="file" multiple tabindex="-1" aria-hidden="true" data-input>
      </div>
      <ul class="drop__list" data-list></ul>
      <p class="sr" role="status" aria-live="polite" data-said></p>
    </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.

25 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 «La zona dei file» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero una cornice scura dal bordo tratteggiato, con dentro tre fogli (due grigi e uno viola davanti, con una freccia in su), la scritta Drop files here or browse e sotto PDF, images or zip, up to 20 MB each; i trattini girano piano intorno alla cornice. Col puntatore sopra, i fogli si aprono un poco. Trascinando dei file sulla pagina i trattini diventano viola e corrono, i fogli si aprono a ventaglio e la scritta dice Drop them in here; sopra la cornice i trattini si uniscono in una linea, i fogli si aprono del tutto e si spostano col puntatore, e la scritta dice Release to upload. Lasciati i file, i fogli si abbassano e rimbalzano, dalla cornice parte un’onda verso l’esterno e per ogni file un foglio viene lanciato in alto e ricade nella sua riga prendendo il colore del tipo di file: rosso per i PDF, giallo per gli zip, azzurro per le immagini, viola per i video. Le righe si aprono una dopo l’altra con nome e peso, la barra viola si riempie mentre la percentuale conta, e a caricamento finito la barra si richiude e accanto a Uploaded si disegna una spunta verde. Un file più grande di 20 MB diventa rosso, trema e dice Too big, 20 MB max. La crocetta toglie una riga, che scivola via a destra mentre le altre salgono. Al telefono la scritta diventa Tap to choose files.

Come funziona

Una cornice che cammina

I trattini sono un rettangolo SVG che lo script misura sulla cornice. Uno stroke-dashoffset gira senza fine su 170 pixel, dieci volte il disegno dei trattini (9 pieni e 8 vuoti), così il giro non ha cuciture; ogni stato gli cambia la velocità con timeScale, e sopra la cornice lo stroke-dasharray passa da 9 8 a 17 0 e i trattini diventano una linea.

File sopra la pagina

La finestra ascolta dragover solo per i trascinamenti che portano dei file: dice se sono sopra la cornice o fuori e fa ripartire un’attesa di 0,2 secondi. dragover continua ad arrivare finché i file sono sulla pagina, quindi quando l’attesa finisce i file se ne sono andati e la cornice torna a riposo.

Il ventaglio

Ogni foglio ha un posto a riposo e una direzione in cui aprirsi: fan() li porta a una frazione di FAN, poca col puntatore sopra, a metà coi file sulla pagina, tutta sopra la cornice, dove i fogli si spostano anche verso il puntatore. Lasciati i file i fogli si abbassano e tornano su con elastic.out, e una copia del rettangolo si allarga e svanisce.

I fogli nelle righe

Le righe nuove si aggiungono alla lista e lo script misura subito dove finirà il loro foglietto, prima che si aprano da altezza zero. Da lì una copia del foglio davanti vola verso quel punto: x su una curva, y prima su di 34 pixel e poi giù, così è un lancio; intanto si rimpicciolisce alla misura del foglietto e prende il colore del tipo di file.

Il caricamento

send() è finto: riceve il file, una funzione da chiamare con la parte già mandata (da 0 a 1) e un segnale che dice se la riga è stata tolta, e risponde con una promessa; al suo posto va il caricamento vero, per esempio un XMLHttpRequest con upload.onprogress. Finito, la barra si richiude e la spunta si disegna con stroke-dashoffset; oltre MAX_MB la riga diventa rossa e trema.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`MAX_MB`	script.js	`20`	Il file più grande accettato, in megabyte.
`FAN`	script.js	`[16, 24, 12]`	Quanto si aprono i fogli coi file sopra la cornice: i gradi, i pixel di lato e quelli in su.
`SPEED`	script.js	`7`	La velocità del caricamento finto, in megabyte al secondo.
`MARCH`	script.js	`16`	Quanto corrono i trattini intorno alla cornice coi file sopra, in pixel al secondo.
`SAMPLES`	script.js	`[['autumn-brochure.pdf', 2.4], ['farm-photos.zip', 14.8], ['drone-flight.mov', 48.2]]`	I file finti che lascia cadere l’anteprima della libreria, col loro peso in megabyte.

Provali nel Playground

Quando usarla

Per caricare documenti, foto o allegati: in un modulo di contatto o di candidatura, in un’area clienti, nel pannello di un sito.

Sul telefono

Al telefono i file non si trascinano: la scritta diventa Tap to choose files e un tocco apre la scelta dei file. Le righe prendono la larghezza dello schermo e i nomi lunghi finiscono coi tre puntini.

Con il movimento ridotto

I trattini restano fermi e i fogli passano da una posizione all’altra senza muoversi; niente lancio né rimbalzi né tremore: le righe compaiono già aperte, la scritta accanto cambia di colpo e la barra si riempie a scatti.

Trappole

dragenter e dragleave arrivano anche passando da un elemento figlio all’altro, e contarli porta facilmente a sbagliare: meglio dragover, che continua ad arrivare finché i file sono sopra la pagina, e tornare a riposo quando smette.
Senza preventDefault su dragover e su drop, un file lasciato fuori dalla cornice verrebbe aperto dal browser al posto della pagina: la finestra li ferma tutti e due, ma solo per i trascinamenti di file.
Una riga che si chiude fino a niente non deve lasciare buchi: lo spazio fra le righe è un margine sotto ogni riga, che si chiude con lei, e non il gap della lista.
Il punto dove atterra il foglio va misurato subito dopo aver aggiunto le righe, prima che comincino ad aprirsi da altezza zero: misurato dopo, il foglio atterrerebbe nel posto sbagliato.
Un clic vero sulla cornice apre la scelta dei file; quello che arriva da uno script (detail 0, l’anteprima della libreria) lascia cadere dei file finti, così l’anteprima non apre mai finestre.

Librerie

GSAP 3.15.0, Figtree (font variabile) 5.3.0.

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