Il pannello spinto a mano

Intro, Transizioni, SVGGSAP, Solo CSSMediaPeso compresso: Demo 7,6 KBGSAP 28 KBGratisScarica lo zip

L’apertura di un portfolio: sullo schermo nero entra un omino disegnato che spinge un pannello bianco in tre spinte e scopre il nome in rosso; poi il bianco scivola giù e il nome resta fermo mentre viene cancellato.

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 panel pushed by hand</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
  <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>
  <!-- the opening of a made-up designer's portfolio. On a black screen a little figure walks in from the left pushing
       a white panel in front of it, in three pushes, and the panel uncovers the name in red; then the white panel
       slides down off the screen, the name drifts up, and the home page is underneath -->
  <main class="pagina">
    <header class="testata">
      <p class="firma">KAI VERO<sup>&reg;</sup></p>
      <nav class="voci" aria-label="Main">
        <a href="#">Work</a>
        <a href="#">About</a>
        <a href="#">Playground</a>
        <a href="#">Contact</a>
      </nav>
      <a class="scrivi" href="#">hello@kaivero.studio</a>
    </header>
    <section class="eroe">
      <p class="eroe__sopra">Independent designer &amp; art director</p>
      <h1 class="eroe__titolo">Interfaces with<br>a sense of humour.</h1>
      <p class="eroe__sotto">Selected work, 2019 to now</p>
    </section>
    <ul class="lavori" aria-label="Selected work">
      <li class="lavoro" style="--tinta: #ff4b3e">Paper Moons</li>
      <li class="lavoro" style="--tinta: #1d1d1d">Low Tide Records</li>
      <li class="lavoro" style="--tinta: #3b5bdb">Field Notes Co.</li>
      <li class="lavoro" style="--tinta: #f2b705">Sunday Ferry</li>
    </ul>
  </main>

  <div class="sipario" data-sipario aria-hidden="true">
    <div class="sipario__bianco"></div>
    <p class="sipario__nome" data-nome>Kai<br>Vero</p>
    <div class="sipario__nero" data-nero></div>
    <div class="spinta" data-spinta>
      <svg class="omino" data-omino viewBox="0 0 240 262" aria-hidden="true">
        <defs>
          <!-- the dots of the cap and the socks, and the flowers of the shirt -->
          <pattern id="puntini" width="3.6" height="3.6" patternUnits="userSpaceOnUse">
            <circle cx="1.2" cy="1.2" r=".75" fill="currentColor"/>
          </pattern>
          <pattern id="fiori" width="24" height="24" patternUnits="userSpaceOnUse" patternTransform="rotate(-18)">
            <g fill="#ffffff" stroke="currentColor" stroke-width=".9">
              <circle cx="6" cy="3.4" r="2.6"/><circle cx="8.6" cy="5.4" r="2.6"/><circle cx="7.6" cy="8.4" r="2.6"/>
              <circle cx="4.4" cy="8.4" r="2.6"/><circle cx="3.4" cy="5.4" r="2.6"/>
            </g>
            <circle cx="6" cy="6.2" r="1.3" fill="currentColor"/>
            <g fill="#ffffff" stroke="currentColor" stroke-width=".8">
              <circle cx="18" cy="15.6" r="1.8"/><circle cx="19.8" cy="17" r="1.8"/><circle cx="19.1" cy="19" r="1.8"/>
              <circle cx="16.9" cy="19" r="1.8"/><circle cx="16.2" cy="17" r="1.8"/>
            </g>
            <circle cx="18" cy="17.4" r=".9" fill="currentColor"/>
          </pattern>
          <clipPath id="taglio-maglia">
            <path d="M86 178 C82 150 102 112 132 96 C140 92 148 90 154 90 L168 94 C172 104 170 128 154 156 C146 170 136 178 126 182 C112 188 94 186 86 178 Z"/>
          </clipPath>
        </defs>
        <g fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round">
          <!-- the far leg: the thigh in the shorts turns at the hip, the shin with sock and shoe turns at the knee -->
          <g class="gamba gamba--dietro">
            <g data-coscia="dietro">
              <path class="arto" d="M0 22 L0 40"/><path class="arto-dentro" d="M0 22 L0 40"/>
              <path class="calzoni" d="M-14 -8 C-6 -12 8 -12 14 -6 C15 4 14 14 12 23 C6 27 -6 27 -11 23 C-14 14 -15 4 -14 -8 Z"/>
              <path class="dettaglio" d="M-11 19 C-5 22 5 22 11 19"/>
              <path class="dettaglio" d="M6 -2 L4 12"/>
            </g>
            <g data-stinco="dietro">
              <path class="arto" d="M0 0 L0 26"/><path class="arto-dentro" d="M0 0 L0 26"/>
              <path class="dettaglio" d="M-3 3 C0 6 3 5 4 2"/>
              <rect class="calzino" x="-8.5" y="22" width="17" height="16" rx="4"/>
              <rect class="puntinato" x="-8.5" y="22" width="17" height="16" rx="4"/>
              <path class="dettaglio" d="M-8.5 27 L8.5 27 M-8.5 30 L8.5 30"/>
              <g data-scarpa="dietro" transform="translate(0 40)">
                <path class="scarpa" d="M-9 -7 C-9 -12 3 -13 7 -9 L17 -3 C24 0 24 6 18 7 L-11 7 C-15 7 -15 -3 -9 -7 Z"/>
                <path class="suola" d="M-13 5 L22 5 C23 8 21 10 19 10 L-11 10 C-14 10 -15 7 -13 5 Z"/>
                <path class="dettaglio" d="M-1 -10 L5 -6 M2 -11 L8 -7 M5 -11 L10 -7"/>
                <path class="dettaglio" d="M-8 -1 C0 -4 8 -1 13 3"/>
                <path class="dettaglio" d="M15 -2 C18 -1 20 1 21 4"/>
              </g>
            </g>
          </g>

          <!-- the far arm, behind the body -->
          <g class="braccio--dietro">
            <path class="arto" d="M146 108 L182 114 L218 108"/><path class="arto-dentro" d="M146 108 L182 114 L218 108"/>
            <path class="mano" d="M216 98 C220 94 228 94 230 100 L231 116 C231 121 224 122 219 117 L214 110 C211 106 212 101 216 98 Z"/>
            <path class="dettaglio" d="M224 101 L231 101 M224 106 L231 106 M224 111 L231 111"/>
          </g>

          <!-- the near leg: the thigh in the shorts turns at the hip, the shin with sock and shoe turns at the knee -->
          <g class="gamba gamba--avanti">
            <g data-coscia="avanti">
              <path class="arto" d="M0 22 L0 40"/><path class="arto-dentro" d="M0 22 L0 40"/>
              <path class="calzoni" d="M-14 -8 C-6 -12 8 -12 14 -6 C15 4 14 14 12 23 C6 27 -6 27 -11 23 C-14 14 -15 4 -14 -8 Z"/>
              <path class="dettaglio" d="M-11 19 C-5 22 5 22 11 19"/>
              <path class="dettaglio" d="M6 -2 L4 12"/>
            </g>
            <g data-stinco="avanti">
              <path class="arto" d="M0 0 L0 26"/><path class="arto-dentro" d="M0 0 L0 26"/>
              <path class="dettaglio" d="M-3 3 C0 6 3 5 4 2"/>
              <rect class="calzino" x="-8.5" y="22" width="17" height="16" rx="4"/>
              <rect class="puntinato" x="-8.5" y="22" width="17" height="16" rx="4"/>
              <path class="dettaglio" d="M-8.5 27 L8.5 27 M-8.5 30 L8.5 30"/>
              <g data-scarpa="avanti" transform="translate(0 40)">
                <path class="scarpa" d="M-9 -7 C-9 -12 3 -13 7 -9 L17 -3 C24 0 24 6 18 7 L-11 7 C-15 7 -15 -3 -9 -7 Z"/>
                <path class="suola" d="M-13 5 L22 5 C23 8 21 10 19 10 L-11 10 C-14 10 -15 7 -13 5 Z"/>
                <path class="dettaglio" d="M-1 -10 L5 -6 M2 -11 L8 -7 M5 -11 L10 -7"/>
                <path class="dettaglio" d="M-8 -1 C0 -4 8 -1 13 3"/>
                <path class="dettaglio" d="M15 -2 C18 -1 20 1 21 4"/>
              </g>
            </g>
          </g>

          <!-- the seat of the shorts, where both legs start -->
          <path class="calzoni" d="M84 170 C88 160 118 158 126 168 L128 186 C118 194 96 194 86 186 Z"/>
          <path class="dettaglio" d="M106 166 L104 186"/>

          <!-- the shirt, with flowers, folds and a collar -->
          <path class="maglia" d="M86 178 C82 150 102 112 132 96 C140 92 148 90 154 90 L168 94 C172 104 170 128 154 156 C146 170 136 178 126 182 C112 188 94 186 86 178 Z"/>
          <path d="M86 178 C82 150 102 112 132 96 C140 92 148 90 154 90 L168 94 C172 104 170 128 154 156 C146 170 136 178 126 182 C112 188 94 186 86 178 Z" fill="url(#fiori)" stroke="none" clip-path="url(#taglio-maglia)"/>
          <path class="dettaglio" d="M110 132 C114 140 116 146 122 150 M100 156 C106 162 112 166 120 168 M138 118 C140 126 140 132 136 140"/>
          <path class="dettaglio" d="M90 176 C104 182 118 182 128 178"/>
          <path class="colletto" d="M152 90 L160 102 L168 94 L164 88 Z"/>

          <!-- the neck and the head -->
          <path class="arto" d="M159 92 L164 82"/><path class="arto-dentro" d="M159 92 L164 82"/>
          <g data-testa>
            <path class="pelle" d="M152 60 C150 42 166 34 180 38 C190 41 194 50 193 57 L200 64 C201 66 199 67 196 67 L194 68 C195 74 192 80 186 82 C178 86 166 86 158 80 C152 74 152 66 152 60 Z"/>
            <path class="capelli" d="M150 54 L146 62 L152 60 L150 70 L156 64 L156 54 Z"/>
            <path class="pelle" d="M156 58 C150 56 148 64 151 69 C153 72 157 72 159 70"/>
            <path class="dettaglio" d="M154 62 C152 64 153 67 156 67"/>
            <path class="berretto" d="M148 54 C148 30 186 22 195 46 C182 46 162 49 148 54 Z"/>
            <path d="M148 54 C148 30 186 22 195 46 C182 46 162 49 148 54 Z" fill="url(#puntini)" stroke="none" opacity=".55"/>
            <path class="visiera" d="M186 44 C200 41 214 45 219 52 C208 55 194 53 187 50 Z"/>
            <path class="dettaglio" d="M171 30 C166 36 160 44 156 52 M171 30 C176 36 180 42 182 47"/>
            <circle cx="171" cy="30" r="2.6" class="bottone"/>
            <path d="M178 51 L189 55" stroke-width="2.2"/>
            <path d="M181 60 C184 57 188 57 190 60" stroke-width="2.2"/>
            <path class="dettaglio" d="M175 68 L178 70 M178 66 L181 68"/>
            <ellipse cx="190" cy="74" rx="3.2" ry="2.6" class="bocca"/>
            <path class="dettaglio" d="M204 70 L210 68 M205 76 L212 77 M203 82 L208 85"/>
            <path class="goccia" data-goccia d="M146 34 C148 39 151 41 148 44 C145 46 142 43 143 40 Z"/>
          </g>

          <!-- the near arm, in front, with the sleeve -->
          <g class="braccio--avanti">
            <path class="arto" d="M170 116 L198 124 L222 122"/><path class="arto-dentro" d="M170 116 L198 124 L222 122"/>
            <path class="maglia" d="M146 98 C156 96 170 102 178 110 C176 118 172 124 168 126 C158 120 150 116 144 112 Z"/>
            <path d="M146 98 C156 96 170 102 178 110 C176 118 172 124 168 126 C158 120 150 116 144 112 Z" fill="url(#fiori)" stroke="none"/>
            <path class="dettaglio" d="M172 120 L176 112"/>
            <path class="mano" d="M220 112 C224 108 232 108 233 114 L234 130 C234 135 227 136 222 131 L217 124 C214 120 215 115 220 112 Z"/>
            <path class="dettaglio" d="M227 115 L234 115 M227 120 L234 120 M227 125 L234 125"/>
            <path class="dettaglio" d="M219 123 C214 120 214 128 220 129"/>
          </g>
        </g>
      </svg>
    </div>
    <p class="sipario__conto" data-conto>0</p>
  </div>

  <button class="ancora" type="button" data-ancora>Play it again</button>

  <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.

50 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 pannello spinto a mano» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

L’apertura del portfolio di Kai Vero, un designer inventato. Lo schermo è nero; da sinistra entra un omino disegnato a mano, col berretto a puntini, la camicia a fiori, i pantaloncini e le scarpe da ginnastica, piegato in avanti, con gli occhi stretti e le guance gonfie per lo sforzo, con le mani contro il bordo del nero, e lo spinge come un armadio: dietro di lui resta un pannello bianco con il nome KAI VERO in rosso, enorme. Spinge tre volte: fino a un terzo dello schermo, si ferma un attimo, fino a due terzi, un’altra sosta, e poi fino in fondo, sempre più in fretta, finché esce dallo schermo insieme al nero. I suoi passi seguono la spinta, quindi nelle soste resta fermo, e quando la fatica cresce gli spunta una goccia di sudore. A destra un numero conta fino a cento e il bordo nero, arrivato lì, lo spinge fuori. Dopo mezzo secondo di bianco il pannello scivola giù, mentre il nome resta fermo: il bordo del bianco lo cancella dall’alto, e sotto c’è la prima pagina del portfolio.

Come funziona

Un numero solo

Tutto dipende da un numero, quanto è andata avanti la spinta, in frazioni della larghezza dello schermo. Una timeline di GSAP lo porta alle tre tappe di STOPS nei tempi di MOVES, con power2.inOut, e fra una e l’altra mette le soste di RESTS; l’ultima tappa ha la curva LAST_EASE, power3.in, che parte piano e finisce di corsa oltre il bordo.

Il nero e il bianco

Il pannello bianco e il nome stanno fermi sotto; sopra c’è un foglio nero che GSAP sposta verso destra della spinta per la larghezza, ma mai oltre BLACK_MAX. Così il bianco col nome si scopre da sinistra senza che niente si muova davvero.

L’omino

L’omino è un SVG disegnato a mano, in due spessori di linea: la testa di profilo col naso, l’orecchio e il berretto con le cuciture, la camicia a fiori fatta con un pattern SVG e ritagliata sulla sagoma, le mani con le dita contro il bordo. Le gambe sono due gruppi per lato: la coscia nei pantaloncini gira all’anca, lo stinco col calzino a righe e la scarpa gira al ginocchio, e la scarpa gira all’indietro di quanto ha girato lo stinco, così resta piatta e punta in giù solo quando il piede si alza. Gli angoli li calcola lo script a ogni fotogramma: la fase del passo è la spinta per STEPS giri, la coscia oscilla con un seno e il ginocchio si piega di più mentre il piede è alzato. La gamba e il braccio lontani sono un poco più grigi.

Il conto

Il numero a destra va da 0 a 30 nella prima spinta, da 30 a 60 nella seconda e da 60 a 100 nell’ultima, come nel sito. Quando il bordo nero arriva alla sua posizione, lo script lo sposta a destra di quanto il nero l’ha superato, così sembra spinto via. SHOW_COUNT lo nasconde.

L’uscita

Finita la spinta e passati FINAL_HOLD secondi, dopo EXIT_DELAY il pannello scende di un’altezza di schermo in EXIT_TIME secondi con power2.inOut, e il nome, che sta dentro il pannello, sale di altrettanto: sullo schermo il nome non si muove, e il bordo del pannello lo cancella dall’alto. Al telefono la prima e l’ultima spinta durano tre decimi in più e l’ultima arriva più lontano.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`STOPS`	script.js	`[0.3, 0.6, 1.28]`	Dove finiscono le tre spinte, in larghezze di schermo (nel sito 0,3, 0,6 e 1,28).
`MOVES`	script.js	`[0.65, 0.72, 1.46]`	Quanto dura ogni spinta, in secondi (nel sito 0,65, 0,72 e 1,46).
`RESTS`	script.js	`[0.16, 0.2]`	Le soste dopo la prima e la seconda spinta (nel sito 0,16 e 0,2).
`BLACK_MAX`	script.js	`1.12`	Dove si ferma il nero (nel sito 1,12).
`EXIT_TIME`	script.js	`1.33`	Quanto ci mette il bianco a scendere (nel sito 1,33).
`STEPS`	script.js	`3.2`	Quanti passi fa l’omino per attraversare lo schermo.
`HOLD`	script.js	`2.4`	I secondi prima di ricominciare; 0 per una volta sola.

Provali nel Playground

Quando usarla

Per l’apertura del portfolio di un illustratore, di un designer o di uno studio con un carattere scherzoso, alla prima visita. Il personaggio va disegnato nello stile del sito.

Sul telefono

Uguale, con l’omino più piccolo e i tempi del sito per il telefono: la prima e l’ultima spinta più lente, l’ultima più lunga.

Con il movimento ridotto

Niente spinta: il pannello non c’è e la prima pagina compare in dissolvenza.

Trappole

Il nero va spostato con un transform, non cambiando left o width: altrimenti a ogni fotogramma il browser rifà l’impaginazione di tutto lo schermo.
Il nome deve stare dentro il pannello che scende, non fuori: è il pannello col suo overflow nascosto che lo cancella. Fuori, resterebbe sullo schermo sopra la pagina.
I passi vanno legati alla spinta e non al tempo: legati al tempo, l’omino camminerebbe sul posto durante le soste.
Il conto va misurato a ogni fotogramma con offsetWidth: passando da 9 a 10 e da 99 a 100 il numero si allarga, e il punto in cui il nero lo raggiunge cambia.
Le gambe vanno disegnate prima della camicia: con i pantaloncini sopra l’orlo, sembrano una scatola appiccicata al corpo.

Librerie

GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0, Geist (font variabile) 5.3.0.

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

Collaudo

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