Il menu a cassetta degli attrezzi

Menu, Fisica, Transizioni, HoverCanvas, GSAPImpegnativaPeso compresso: Demo 15 KBGSAP 28 KBGratisScarica lo zip

Il menu degli strumenti di un editor di foto come una cassetta degli attrezzi di metallo blu con i vassoi a sbalzo. Chiusa è il pulsante; premuta, il fermo cade e dondola, i vassoi salgono e si allargano a gradini sui loro bracci incernierati, sempre in piano, e sbattono contro l’arresto con un rimbalzo; poi i coperchi si ribaltano come pannelli porta attrezzi. In ogni vassoio c’è un attrezzo che è un’azione: sotto il puntatore si solleva, scelto esce dalla cassetta, che si richiude con lo scatto del fermo.

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 toolbox menu</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the toolbox menu: the actions of a photo editor as the trays of a cantilever toolbox. Closed, the box is the
         button. Pressed, the latch flips, the trays rise and step outwards on their hinged arms (two parallel arms
         per tray, so every tray stays level) and the lids swing back like tool boards. The metal, the arms and the
         tools are painted on the canvas; the buttons on top of it are the real menu -->
    <div class="box" data-box>
      <canvas class="box__paint" aria-hidden="true" data-paint></canvas>

      <button class="lid-button" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="toolbox-menu" data-toggle data-autoclic>
        <span class="plate" aria-hidden="true" data-plate>
          <span class="plate__face" data-face><span class="plate__word">Tools</span></span>
        </span>
        <span class="sr" data-name>Tools</span>
      </button>

      <div class="trays" id="toolbox-menu" role="menu" aria-label="Photo tools" tabindex="-1" data-menu inert>
        <button class="tray" type="button" role="menuitem" tabindex="-1" data-tray="crop" data-autoclic>
          <span class="tray__label" data-label>Crop</span>
        </button>
        <button class="tray" type="button" role="menuitem" tabindex="-1" data-tray="adjust">
          <span class="tray__label" data-label>Adjust</span>
        </button>
        <button class="tray tray--board" type="button" role="menuitem" tabindex="-1" data-tray="retouch">
          <span class="tray__label" data-label>Retouch</span>
        </button>
        <button class="tray tray--board" type="button" role="menuitem" tabindex="-1" data-tray="straighten">
          <span class="tray__label" data-label>Straighten</span>
        </button>
      </div>
    </div>
    <p class="sr" aria-live="polite" data-say></p>
  </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.

27 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 «Il menu a cassetta degli attrezzi» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco c’è solo una cassetta degli attrezzi chiusa, larga 188 pixel e alta 60: tre fasce di lamiera verniciata di blu, con il bordo arrotolato che prende la luce e la grana della vernice martellata, i bracci d’acciaio zincato ripiegati in diagonale e fermati dai rivetti, un fermo sulla fessura del coperchio e una targhetta di zinco con la scritta TOOLS. Passandoci sopra, un riflesso scorre sulla vernice e il fermo trema. Premendola, la targhetta dice CLOSE, il fermo si sgancia, cade e dondola sul suo perno finché resta appeso, e i quattro vassoi si aprono: quelli di sotto salgono sulla cassetta, quelli di sopra salgono su di loro, a gradini verso fuori. Ogni vassoio è portato da due bracci paralleli della stessa lunghezza, un quadrilatero articolato vero, quindi resta in piano mentre i bracci ruotano e disegnano il loro arco. Una molla per braccio lo lancia contro l’arresto: sbatte, rimbalza appena e si posa, e la cassetta prende il colpo. Quando i vassoi di sopra sono quasi in cima, i loro coperchi si ribaltano all’indietro e mostrano il lato interno, verniciato di fondo chiaro, dove gli attrezzi stanno appesi a due ganci sopra la loro sagoma dipinta. La cassetta intanto si abbassa, così la cassetta aperta resta al centro. Sul fronte di ogni vassoio è stampato il nome dell’azione: Crop col taglierino giallo e Adjust col cacciavite dal manico ambrato nei vassoi di sotto, Retouch col pennello ancora bagnato di vernice e Straighten con la livella nei coperchi. Sotto il puntatore l’attrezzo si solleva dal vassoio o si stacca dai ganci, con l’ombra che si allarga, e la bolla della livella corre al centro. Scegliendolo, l’attrezzo esce dalla cassetta, i coperchi si richiudono, i vassoi rientrano e sbattono uno sull’altro, il fermo risale e scatta, e la targhetta dice che cosa è stato fatto (Cropped, Adjusted, Retouched, Straightened) prima di tornare a TOOLS. Si richiude anche col pulsante, con Esc o con un clic fuori.

Come funziona

Il quadrilatero articolato, calcolato

Ogni vassoio è appeso a due bracci paralleli della stessa lunghezza, imperniati sul genitore: la cassetta per i vassoi di sotto, il vassoio di sotto per quelli di sopra. Lo script conosce solo dove sta il vassoio chiuso e dove deve arrivare aperto: il perno deve stare alla stessa distanza dalla punta del braccio nei due posti, quindi sull’asse del segmento che li unisce. Di quella retta prende il punto più vicino a dove lo vorrebbe, tenuto dentro la faccia del genitore; da lì vengono la lunghezza del braccio e i suoi due angoli. A ogni fotogramma la posizione del vassoio è la punta del braccio meno il punto d’attacco: il vassoio non ruota mai e segue un arco vero.

Una molla per braccio e l’arresto

L’apertura di ogni braccio è un numero da 0 a 1 con la sua velocità. Una molla smorzata mira un poco oltre l’arresto (1,08 aprendo, -0,08 chiudendo), così il vassoio ci arriva con velocità: lì rimbalza tenendo BOUNCE della sua velocità e la molla lo rispinge contro, finché si posa. Ogni urto dà una spinta a una molla rigida che abbassa la cassetta di un pixel o due. La fisica gira sul ticker di GSAP in passi da 1/240 di secondo, col passo del fotogramma limitato a 1/30, e i vassoi di sopra partono STAGGER secondi dopo.

I coperchi che si ribaltano

Il coperchio dei vassoi di sopra gira su una cerniera dietro al vassoio. Visto di fronte, il suo lato interno si vede alto quanto la profondità per il seno dell’angolo, e il suo bordo spesso quattro unità per il coseno: lo script disegna il pannello con scale(1, seno) e ci mette dentro gli attrezzi e le loro sagome, scuriti finché il coperchio è quasi piatto. Si apre su una molla poco smorzata quando il vassoio ha passato il 62 per cento della corsa, e si richiude per primo.

Tutto dipinto su un canvas

Lamiera, bracci, rivetti, attrezzi e ombre sono disegnati su un canvas a ogni fotogramma, ma solo finché qualcosa si muove. Le fasce di vernice hanno una sfumatura verticale col bordo arrotolato chiaro, la grana martellata (una piastrella di ammaccature morbide ripetuta) e i fianchi più scuri; i bracci hanno la sfumatura di traverso con il lato chiaro sempre verso l’alto, comunque girino. Le ombre del canvas non seguono la trasformazione, quindi sfocatura e spostamento sono moltiplicati per la scala a mano.

Un menu vero sopra il disegno

Sopra il canvas ci sono dei button veri: la cassetta, con aria-expanded e aria-controls, e quattro voci role=menuitem che lo script sposta a ogni fotogramma sopra i loro vassoi, con il nome stampato in testo vero. Le frecce passano da una voce all’altra, Home ed End vanno alla prima e all’ultima, una lettera alla voce che comincia così; Esc e Tab richiudono e rendono il fuoco alla cassetta. Il menu chiuso è inert.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`REACH`	script.js	`134`	Quanto lontano dal centro stanno i vassoi di sopra a cassetta aperta, in pixel; i perni dei bracci si ricalcolano da soli.
`RISE`	script.js	`112`	Quanto in alto, dal fondo della cassetta, stanno i vassoi di sopra a cassetta aperta, in pixel.
`SPRING`	script.js	`48`	Quanto forte le molle dei bracci lanciano i vassoi verso l’arresto.
`BOUNCE`	script.js	`0.34`	Quanta velocità tiene un vassoio quando sbatte contro l’arresto (0 niente, 0,6 vivace).
`STAGGER`	script.js	`0.07`	I secondi fra la partenza dei vassoi di sotto e quella dei vassoi di sopra.
`LID`	script.js	`100`	Di quanti gradi si ribaltano i coperchi.
`LIFT`	script.js	`9`	Quanto si solleva un attrezzo sotto il puntatore, in pixel.
`HOLD`	script.js	`1.6`	I secondi in cui la targhetta dice che cosa è stato fatto.
`OPEN_WORD`	script.js	`'Close'`	Che cosa dice la targhetta mentre la cassetta è aperta.
`DONE_WORDS`	script.js	`['Cropped', 'Adjusted', 'Retouched', 'Straightened']`	Che cosa dice la targhetta dopo ogni attrezzo, nell’ordine del menu.

Provali nel Playground

Quando usarla

Per il menu degli strumenti o delle azioni di un editor (foto, video, progetti, siti) o di un’app con un carattere da oggetto: un negozio di bricolage, un servizio di riparazioni, uno strumento per creativi. Quattro azioni brevi, una per vassoio; per averne sei bisogna aggiungere un piano di vassoi e allargare la cornice.

Sul telefono

La cornice è larga 384 unità e a 390 pixel si stringe a circa 0,93: la cassetta chiusa resta alta 56 pixel e quella aperta sta dentro lo schermo, coi nomi ancora leggibili. Il tocco apre e chiude come il clic; il dito che preme una voce solleva il suo attrezzo come il puntatore, e lasciandolo lo sceglie.

Con il movimento ridotto

Niente bracci che girano, niente rimbalzi e niente colpi: la cassetta si dissolve e ricompare aperta o chiusa, l’attrezzo sotto il puntatore non si solleva ma il nome sul vassoio si schiarisce, e scegliendo un’azione la cassetta si dissolve chiusa con la targhetta che dice che cosa è stato fatto. Le parole della targhetta si dissolvono invece di rotolare.

Trappole

Col perno a un’altezza fissa, per alcuni valori di REACH e RISE l’asse finiva fuori dalla cassetta e il perno restava appeso nel vuoto: ora il perno è il punto dell’asse più vicino a quello voluto, fatto scorrere lungo l’asse finché sta dentro la faccia del genitore, così i bracci restano uguali e paralleli.
Il fermo doveva scattare quando tutti i vassoi erano a casa, ma il ticker usciva prima del controllo nei fotogrammi in cui non si muoveva niente, e la targhetta non diceva mai Cropped: il controllo ora sta prima dell’uscita.
Il fermo appeso copriva la S di STRAIGHTEN: la cerniera è passata sul vassoio di sinistra, dove RETOUCH è più corto.
Gli attrezzi dei vassoi di sotto spuntavano sopra la cassetta chiusa: possono salire solo per l’altezza del vassoio di sopra più il bordo del coperchio, 20 unità.
La chiave inglese, di cui si vedeva solo la testa, sembrava una lente: al suo posto il cacciavite, che si riconosce dal manico.
shadowBlur e shadowOffsetY del canvas non seguono setTransform: le ombre erano piccole sullo schermo retina e grandi a scala ridotta, e ora sono moltiplicate per la scala.
Nella dissolvenza del movimento ridotto la parola della targhetta restava sola a mezz’aria: ora si dissolve insieme al disegno.

Librerie

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

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

Collaudo

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