Il pulsante a tabellone

Pulsanti, Testo, 3DGSAPImpegnativaPeso compresso: Demo 4,7 KBGSAP 28 KBGratisScarica lo zip

Un pulsante fatto di tessere da tabellone delle partenze: sotto il puntatore le palette cadono una tessera dopo l’altra, passano per qualche lettera e si fermano sulla seconda parola, in giallo; premuto, tutta la fila gira fino alla terza.

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 split-flap button</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/oswald@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the button: a row of split-flap tiles, like a departures board. Under the pointer the flaps fall one after the
         other through a few letters and land on the second word; a press sends the whole row round to the third.
         The tiles are drawn by the script -->
    <button class="board" type="button" data-board data-autoclic>
      <span class="board__tiles" aria-hidden="true" data-tiles></span>
    </button>
    <p class="sr" role="status" aria-live="polite" data-said></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.

16 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 pulsante a tabellone» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero un pulsante fatto di otto tessere a palette, come un tabellone delle partenze, in una cornice scura: ogni tessera è tagliata a metà da una riga, con due perni ai lati, e mostra una lettera di BOOK NOW. Sotto il puntatore, o raggiunte col tasto Tab, le tessere cominciano a girare una dopo l’altra da sinistra: la paletta di sopra cade in avanti scurendosi, quella di sotto con la lettera nuova scende dal taglio, e ogni tessera passa per qualche lettera a caso prima di fermarsi su LET’S GO, in giallo, con un piccolo rimbalzo. Quando il puntatore se ne va le tessere tornano a BOOK NOW, cominciando da destra. Premuto, il pulsante si schiaccia un poco e torna su una molla, e tutta la fila gira più a lungo fino a SEE YOU!, che resta per un momento e poi torna. All’apertura le tessere sono vuote e girano fino a BOOK NOW.

Come funziona

Le tessere

Lo script fa tante tessere quante sono le lettere della parola più lunga di WORDS (le parole più corte si allungano con degli spazi). Ogni tessera ha quattro metà, alte metà tessera, che tagliano quello che sporge: una di sopra e una di sotto che stanno ferme, e due palette che girano, quella di sopra sul suo bordo basso e quella di sotto sul suo bordo alto. In ognuna c’è la lettera alta quanto tutta la tessera: le metà di sopra ne mostrano la parte alta, quelle di sotto la parte bassa.

Una paletta

Per passare a una lettera nuova, la metà ferma di sopra e la paletta di sotto prendono già la lettera nuova; la paletta di sopra, con quella vecchia, cade da 0 a −90 gradi con power2.in, poi la paletta di sotto scende da 90 a 0 gradi con power2.out (con back.out, cioè con un piccolo rimbalzo, se è l’ultima). Le palette veloci durano FLAP secondi, l’ultima LAND. La tessera ha una prospettiva di quattro volte la sua altezza.

Luce e ombra

Ogni metà ha un velo nero: la paletta che cade si scurisce fino a 0,55, la metà ferma di sotto prende un’ombra mentre la paletta le cade sopra, quella di sopra parte un po’ in ombra e si schiarisce, e la paletta che scende si schiarisce mentre si appoggia.

Una fila che non si inceppa

Ogni tessera ha la sua lettera di arrivo e quante lettere a caso deve fare prima (da SPIN[0] a SPIN[1]), e parte STAGGER secondi dopo la tessera accanto. Se le arriva una parola nuova mentre gira, finisce la sua paletta e prosegue verso quella: una paletta non si ferma mai a metà.

Puntatore, tastiera e dito

Il puntatore del mouse e il focus dal tasto Tab portano la seconda parola; un dito non passa sopra e fa solo la pressione. Una pressione da tastiera, che non ha niente da lasciare, schiaccia il pulsante da sola.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`WORDS`	script.js	`['BOOK NOW', 'LET’S GO', 'SEE YOU!']`	Le tre parole: a riposo, sotto il puntatore, dopo una pressione.
`FLAP`	script.js	`0.1`	I secondi di una paletta veloce, fra caduta e arrivo.
`LAND`	script.js	`0.3`	I secondi dell’ultima paletta di una tessera, che arriva con un piccolo rimbalzo.
`SPIN`	script.js	`[1, 4]`	Per quante lettere passa una tessera prima della sua: il meno e il più.
`STAGGER`	script.js	`0.045`	I secondi fra una tessera e la successiva.
`HOLD`	script.js	`1.6`	Dopo una pressione, i secondi in cui resta la terza parola.

Provali nel Playground

Quando usarla

Per un pulsante che deve farsi notare nella pagina di un viaggio, di un ristorante, di un evento o di un locale: prenotazioni, biglietti, partenze. Parole brevi, fino a una decina di lettere: ogni lettera è una tessera.

Sul telefono

Le tessere si stringono per stare nella larghezza dello schermo (al massimo 50 pixel l’una). Senza puntatore non c’è la seconda parola: un tocco fa girare la fila fino alla terza, che poi torna alla prima.

Con il movimento ridotto

Niente palette: le lettere cambiano tutte insieme e la fila riappare in un quarto di secondo, il pulsante non si schiaccia e all’apertura la prima parola c’è già.

Trappole

Una paletta che gira va finita prima della lettera successiva: interrotta a metà, mostrerebbe una lettera tagliata in due con metà di un’altra. Per questo una parola nuova aspetta la fine della paletta in corso.
La paletta di sotto va girata a 90 gradi prima di scriverci la lettera nuova, nello stesso momento: con un set dentro la timeline partirebbe un fotogramma dopo, e per un attimo la metà bassa della lettera nuova coprirebbe quella vecchia.
Le palette hanno backface-visibility: hidden e la prospettiva sta sulla tessera, non sulle palette: così ogni paletta gira nello spazio della sua tessera.
Gli eventi del puntatore guardano pointerType: un tocco su un telefono manda anche pointerenter, e senza questo controllo la seconda parola arriverebbe insieme alla pressione.

Librerie

GSAP 3.15.0, Oswald (font variabile) 5.3.0.

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