Il dock che si ingrandisce

Menu, Hover, ImmaginiGSAPMediaPeso compresso: Demo 5,2 KBGSAP 28 KBGratisScarica lo zip

Un dock di app con le icone modellate in Blender: sotto il puntatore le icone crescono lungo una curva a campana e spingono le altre di lato, il vassoio si allarga con loro, il nome compare sopra e un clic fa saltare l’icona come un’app che parte.

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 magnifying dock</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/inter@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the dock: under the pointer the icons grow and push the others aside, an opened one jumps.
         The icons are rendered in Blender, one image each -->
    <nav class="dock" aria-label="Apps" data-dock>
      <span class="dock__tray" data-tray aria-hidden="true"></span>
      <button class="dock__item" type="button" aria-label="Home" data-item><img class="dock__icon" src="home.webp" alt="" draggable="false"></button>
      <button class="dock__item" type="button" aria-label="Mail" data-item><img class="dock__icon" src="mail.webp" alt="" draggable="false"></button>
      <button class="dock__item" type="button" aria-label="Messages" data-item data-autoclic><img class="dock__icon" src="messages.webp" alt="" draggable="false"></button>
      <button class="dock__item" type="button" aria-label="Music" data-item data-autoclic><img class="dock__icon" src="music.webp" alt="" draggable="false"></button>
      <button class="dock__item" type="button" aria-label="Camera" data-item data-autoclic><img class="dock__icon" src="camera.webp" alt="" draggable="false"></button>
      <button class="dock__item" type="button" aria-label="Favorites" data-item data-extra><img class="dock__icon" src="favorites.webp" alt="" draggable="false"></button>
      <button class="dock__item" type="button" aria-label="Settings" data-item data-extra><img class="dock__icon" src="settings.webp" alt="" draggable="false"></button>
      <span class="dock__tip" data-tip aria-hidden="true"></span>
    </nav>
  </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.

11 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 dock che si ingrandisce» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Un dock su un fondo bianco, come quello di un computer: un vassoio chiaro con sette icone di app, Home, Mail, Messages, Music, Camera, Favorites e Settings, modellate e illuminate in Blender, piastrelle lucide con un gradiente e un simbolo bianco in rilievo. Sotto il puntatore le icone crescono, quella più vicina fino all’85% in più e le vicine sempre meno lungo una curva a campana larga 150 pixel per lato; crescendo spingono le altre di lato senza mai sovrapporsi, e il vassoio si allarga con loro. Il rigonfiamento segue il puntatore con un piccolo ritardo, così scorre lungo la fila invece di saltare. Sopra l’icona indicata compare il suo nome. Un clic fa saltare l’icona due volte, la seconda più bassa, come un’app che parte, e sotto di lei compare una lineetta. All’arrivo le icone salgono una dopo l’altra con un rimbalzo.

Come funziona

La campana

La grandezza di ogni icona è 1 + (MAX − 1) per una gaussiana della distanza fra il puntatore e il centro dell’icona a riposo, con sigma uguale a RANGE / 2. La distanza si misura dalle posizioni a riposo: misurata da quelle gonfiate, il rigonfiamento sposterebbe le icone sotto il puntatore e si alimenterebbe da solo.

Le posizioni

Dalle grandezze vengono i posti, uno dopo l’altro a partire dal centro del dock: ogni icona occupa la sua larghezza più lo spazio. Sul ticker di GSAP ogni icona riceve un transform per fotogramma e cresce dal fondo (transform-origin in basso); solo il vassoio cambia larghezza.

Il ritardo

Il punto del rigonfiamento e la sua forza inseguono il puntatore con 1 − e^(−dt / FOLLOW), che non dipende da quanti fotogrammi al secondo fa lo schermo. Un rigonfiamento nuovo parte dove punta, invece di scivolare da dove era finito il precedente.

Mai più largo dello schermo

Se la fila gonfiata supera la finestra, ogni icona restituisce la stessa parte della sua crescita. Sotto i 480 pixel due icone si nascondono e le altre partono abbastanza piccole da lasciare posto al rigonfiamento.

Il salto

Una timeline di JUMP[1] salti, ognuno alto il 45% del precedente; la lineetta sotto l’icona cresce con back.out. Premuta con la tastiera, con un dito o da uno script, l’icona tiene il dock gonfio intorno a sé per HOLD secondi.

Le icone

Sette immagini WebP di 320 pixel, circa 12 KB l’una, renderizzate in Blender con Cycles su fondo trasparente, con l’ombra raccolta da un piano «shadow catcher». Stanno nella cartella accanto al codice.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`MAX`	script.js	`1.85`	Quanto diventa grande l’icona sotto il puntatore.
`RANGE`	script.js	`150`	Fin dove arriva il rigonfiamento per lato, in pixel.
`FOLLOW`	script.js	`0.08`	I secondi che il rigonfiamento impiega a raggiungere il puntatore.
`JUMP`	script.js	`[24, 2]`	Il salto di un’icona aperta: quanto in alto, in pixel, e quante volte.
`HOLD`	script.js	`1.6`	Dopo una pressione dalla tastiera, da un dito o da uno script, i secondi in cui il dock resta gonfio.

Provali nel Playground

Quando usarla

Per una barra di app o di strumenti con icone riconoscibili, da cinque a nove: una dashboard, un sito che fa il verso a un sistema operativo, un portfolio giocoso. Con icone senza scritte serve il nome che compare sopra.

Sul telefono

Sul telefono il dock mostra cinque delle sette icone, un po’ più piccole, così resta posto per il rigonfiamento. Si può far scorrere il dito lungo il dock e il rigonfiamento lo segue; un tocco fa saltare l’icona e tiene il dock gonfio intorno a lei per un attimo.

Con il movimento ridotto

Niente rigonfiamento e niente salti: le icone restano della loro misura, il nome compare sopra quella indicata e la lineetta sotto quella aperta.

Trappole

La distanza va misurata dalle posizioni a riposo, non da quelle gonfiate: altrimenti il rigonfiamento sposta le icone, il punto cambia e la fila trema.
Le icone si spostano solo con transform: cambiare la larghezza delle icone a ogni fotogramma rifarebbe l’impaginazione di tutta la fila. Cambia larghezza solo il vassoio, che è un elemento solo.
La zona in cui il dock sente il puntatore comprende lo spazio sopra il vassoio dove arrivano le icone gonfie: misurata sul solo vassoio, il puntatore su un’icona grande ne uscirebbe e il dock si sgonfierebbe a scatti.
Un’immagine scalata con transform resta nitida solo se è grande almeno quanto la sua misura massima: le icone sono di 320 pixel, abbastanza per la densità doppia a quasi il doppio della grandezza.

Librerie

GSAP 3.15.0, Inter (font variabile) 5.3.0.

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

Collaudo

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