Il menu delle app a quadretti

Menu, Transizioni, HoverGSAP, Solo CSSImpegnativaPeso compresso: Demo 8,3 KBGSAP 28 KBGratisScarica lo zip

Il selettore delle app di una suite da ufficio: i nove quadretti del pulsante volano fuori uno dopo l’altro, ognuno sulla sua curva, e crescono fino a diventare le nove icone delle app, prendendo il loro colore per strada. Chiudendo tornano nel pulsante e sono di nuovo i suoi quadretti.

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 app grid menu</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/geist@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the app switcher of a work suite. The button carries the usual nine little squares; pressed, the nine squares
         fly out of it, each on its own curve, and grow into the nine app icons of the menu, taking their colour on the
         way. Closing, they fly back into the button and are its icon again -->
    <div class="suite" data-frame>
      <button class="apps" type="button" aria-expanded="false" aria-controls="app-menu" data-toggle data-autoclic>
        <span class="apps__grid" aria-hidden="true" data-mini-grid>
          <i data-mini></i><i data-mini></i><i data-mini></i>
          <i data-mini></i><i data-mini></i><i data-mini></i>
          <i data-mini></i><i data-mini></i><i data-mini></i>
          <svg class="apps__cross" viewBox="0 0 16 16" data-cross><path d="M3.5 3.5l9 9M12.5 3.5l-9 9"/></svg>
        </span>
        <span class="apps__words" aria-hidden="true">
          <span class="apps__word" data-word-open>Apps</span>
          <span class="apps__word" data-word-close>Close</span>
        </span>
        <span class="sr" data-toggle-name>Open the apps</span>
      </button>

      <nav class="board" id="app-menu" aria-label="Apps" data-board inert>
        <span class="board__ground" aria-hidden="true" data-ground></span>
        <ul class="board__grid" data-board-grid>
          <li><a class="tile" href="#mail" data-tile><span class="tile__icon" style="--tint: #3b6cf6" data-icon><svg viewBox="0 0 24 24"><rect x="3.5" y="6" width="17" height="12" rx="2"/><path d="M4 7l8 6 8-6"/></svg></span><span class="tile__name">Mail</span></a></li>
          <li><a class="tile" href="#calendar" data-tile aria-current="page"><span class="tile__icon" style="--tint: #e8513f" data-icon><svg viewBox="0 0 24 24"><rect x="4" y="5.5" width="16" height="14" rx="2"/><path d="M4 10h16M8.5 3.5v4M15.5 3.5v4M8 14h3"/></svg></span><span class="tile__name">Calendar</span></a></li>
          <li><a class="tile" href="#files" data-tile><span class="tile__icon" style="--tint: #e5952a" data-icon><svg viewBox="0 0 24 24"><path d="M3.5 7.5v10a2 2 0 0 0 2 2h13a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-6.5l-2-2.5h-4.5a2 2 0 0 0-2 2z"/></svg></span><span class="tile__name">Files</span></a></li>
          <li><a class="tile" href="#notes" data-tile><span class="tile__icon" style="--tint: #c9a227" data-icon><svg viewBox="0 0 24 24"><path d="M6.5 3.5h8l4 4v12a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1v-15a1 1 0 0 1 1-1z"/><path d="M14.5 3.5v4h4M8.5 12h7M8.5 15.5h5"/></svg></span><span class="tile__name">Notes</span></a></li>
          <li><a class="tile" href="#chat" data-tile><span class="tile__icon" style="--tint: #22a06b" data-icon><svg viewBox="0 0 24 24"><path d="M5 5.5h14a1.5 1.5 0 0 1 1.5 1.5v8.5a1.5 1.5 0 0 1-1.5 1.5h-8l-4.5 3.5v-3.5h-1.5a1.5 1.5 0 0 1-1.5-1.5v-8.5a1.5 1.5 0 0 1 1.5-1.5z"/></svg></span><span class="tile__name">Chat</span></a></li>
          <li><a class="tile" href="#photos" data-tile><span class="tile__icon" style="--tint: #8b5cf6" data-icon><svg viewBox="0 0 24 24"><rect x="3.5" y="5" width="17" height="14" rx="2"/><path d="M3.5 16l5-5 4 4 2.5-2.5 5.5 5.5"/><circle cx="15.5" cy="9" r="1.6"/></svg></span><span class="tile__name">Photos</span></a></li>
          <li><a class="tile" href="#tasks" data-tile><span class="tile__icon" style="--tint: #1597a8" data-icon><svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3"/><path d="M8 12.5l2.5 2.5 5.5-6"/></svg></span><span class="tile__name">Tasks</span></a></li>
          <li><a class="tile" href="#meet" data-tile><span class="tile__icon" style="--tint: #ec6a2c" data-icon><svg viewBox="0 0 24 24"><rect x="3.5" y="7" width="12" height="10" rx="2"/><path d="M15.5 10.5l5-3v9l-5-3"/></svg></span><span class="tile__name">Meet</span></a></li>
          <li><a class="tile" href="#settings" data-tile><span class="tile__icon" style="--tint: #5b6170" data-icon><svg viewBox="0 0 24 24"><path d="M4 7h9M17 7h3M4 12h3M11 12h9M4 17h11M19 17h1"/><path d="M15 5v4M9 10v4M17 15v4"/></svg></span><span class="tile__name">Settings</span></a></li>
        </ul>
        <a class="board__all" href="#all" data-all>All apps<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8h9.5M9 4.5 12.5 8 9 11.5"/></svg></a>
      </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.

36 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 delle app a quadretti» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su una pagina bianca c’è un pulsante bianco con «Apps» e i soliti nove quadretti neri, che sotto il puntatore si allargano di un soffio dal centro. Premuto, il pulsante sale e la sua parola diventa «Close»; i nove quadretti si staccano dal pulsante uno dopo l’altro e volano giù, ognuno su una curva che si apre verso l’esterno, girando un poco: crescono fino a diventare le icone di Mail, Calendar, Files, Notes, Chat, Photos, Tasks, Meet e Settings, passando dal nero al loro colore, e arrivano con un piccolo rimbalzo mentre sotto di loro compare la scheda bianca. Sopra ogni icona appare il suo disegno, sotto il suo nome; nel pulsante una croce prende il posto dei quadretti. L’app in cui sei, Calendar, ha il nome in nero pieno e una lineetta del suo colore sotto l’icona. Sotto il puntatore una tessera si illumina, la sua icona si alza e le altre si scostano un poco. Scegliendo un’app l’icona rimbalza come se partisse, poi le icone volano indietro dentro il pulsante, tornando nere e piccole, quella scelta per ultima, e il pulsante torna al centro. In fondo c’è All apps. Si chiude anche con Esc, col pulsante o premendo fuori.

Come funziona

Un FLIP per ogni icona

Le icone stanno già nelle loro tessere. All’apertura ognuna si misura a casa sua e si misura il quadretto del pulsante che le corrisponde (la stessa posizione nella griglia tre per tre); un transform la rimanda esattamente sopra il quadretto, con la scala del quadretto, e da lì torna a casa. Si misura dopo che il pulsante è salito, così parte da dove il quadretto è davvero.

Il volo su una curva

Ogni icona ha un solo numero, l’avanzamento da 0 a 1, che GSAP porta avanti. A ogni passo la posizione è la retta dal quadretto a casa, più uno scarto di lato lungo sin(π·t), verso l’esterno per le colonne di sinistra e di destra (ARC); la scala segue una back.out (POP), così l’icona arriva un po’ più grande e si assesta; la rotazione parte da qualche grado e torna dritta. Partono una ogni SPREAD secondi.

Il colore per strada

Il fondo di ogni icona parte col nero del pulsante e va al suo colore (la variabile --tint) mentre vola; il disegno bianco compare a metà strada, il nome quando è arrivata. Alla chiusura tutto al contrario: il disegno sparisce subito, il fondo torna nero, l’icona rimpicciolisce e quando arriva sul quadretto lo lascia comparire e sparisce lei.

Le tessere che si scostano

Sotto il puntatore (o col focus da tastiera) la tessera si illumina e la sua icona si alza di LIFT pixel con un rimbalzo; ogni altra tessera si sposta di PUSH pixel nella direzione che va dall’icona indicata a lei, meno se è lontana. Le frecce muovono il focus nella griglia, Invio sceglie, Esc chiude e riporta il focus al pulsante.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`FLIGHT`	script.js	`0.72`	I secondi di volo di un quadretto che diventa icona.
`ARC`	script.js	`0.8`	Quanto curvano i quadretti in volo (0 dritti, 1,6 larghi).
`SPREAD`	script.js	`0.04`	I secondi fra un quadretto che parte e il successivo.
`POP`	script.js	`1.8`	Quanto un’icona va oltre la sua misura arrivando (0 per niente, 4 molto).
`LIFT`	script.js	`4`	Di quanti pixel si alza l’icona sotto il puntatore.
`PUSH`	script.js	`3`	Di quanti pixel le altre tessere le fanno posto.

Provali nel Playground

Quando usarla

Per un’app web con più prodotti, una dashboard, un gestionale o una suite: il pulsante coi nove quadretti lo conoscono tutti, e qui mantiene quello che promette. Va bene con sei, nove o dodici app.

Sul telefono

La scheda si stringe alla larghezza dello schermo e i quadretti volano allo stesso modo; il tocco sceglie l’app. Senza puntatore le tessere non si scostano.

Con il movimento ridotto

Niente volo: la scheda compare in dissolvenza con le icone già al loro posto, e la croce prende subito il posto dei quadretti. Le tessere si illuminano sotto il puntatore senza muoversi.

Trappole

Il pulsante sta sopra la scheda: le icone in volo gli passavano sotto e sparivano dietro di lui prima di arrivare ai quadretti. Mentre volano la scheda sale sopra il pulsante.
Le icone vanno misurate dopo che il pulsante è salito: misurate al clic, partivano da dove il pulsante era prima e i quadretti restavano soli.
Prima del decollo le icone erano già visibili a casa per un attimo, colorate e senza disegno: ora restano nascoste finché non sono state rimandate sui quadretti.
La lineetta sotto l’icona dell’app in cui sei volava con l’icona, rimpicciolita: durante il volo è spenta.
La transizione CSS sul transform dei quadretti (per l’allargamento sotto il puntatore) frenava il loro arrivo animato da GSAP: per l’arrivo la transizione si toglie e poi si rimette.
Il puntatore che attraversa le tessere mentre il menu si chiude le accendeva: durante la chiusura le tessere non ascoltano più il puntatore.

Librerie

GSAP 3.15.0, Geist (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 19 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.