Il pulsante da tenere premuto

Pulsanti, Transizioni, SVGGSAPMediaPeso compresso: Demo 5,6 KBGSAP 28 KBGratisScarica lo zip

Un lucchetto che si apre solo se lo vuoi davvero: tenendo premuto, un colore ambra cresce in cerchio dal punto in cui è il dito e l'arco del lucchetto comincia a salire, e verso la fine tutto il pulsante trema. Lasciato troppo presto il colore torna indietro; tenuto fino in fondo, il lucchetto scatta aperto e il pulsante diventa verde. Un tocco lo richiude.

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 press-and-hold button</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/host-grotesk@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the press-and-hold button: held down, a fill grows out from under the finger and the shackle of the lock starts
         to rise; let go too soon and the fill runs back; held to the end, the lock springs open -->
    <div class="hold" data-hold data-autoclic>
      <span class="hold__ring" aria-hidden="true" data-ring></span>
      <button class="hold__btn" type="button" aria-describedby="hold-hint" data-btn>
        <span class="hold__face" data-face>
          <span class="hold__icon">
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <path class="hold__shackle" d="M8 11V7.5a4 4 0 0 1 8 0V11" data-shackle/>
              <rect x="5" y="11" width="14" height="10" rx="2.6"/>
              <path d="M12 14.8v2.6"/>
            </svg>
          </span>
          <span class="hold__label"><span class="hold__word" data-word>Hold to unlock</span></span>
        </span>
        <span class="hold__face hold__face--fill" aria-hidden="true" data-fill></span>
      </button>
      <p class="hold__hint" id="hold-hint"><span data-hint>Press and hold until the lock opens</span></p>
      <p class="sr" aria-live="polite" data-live></p>
    </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.

14 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 da tenere premuto» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero un pulsante a pillola grafite con un lucchetto in un cerchio e la scritta Hold to unlock, e sotto la riga Press and hold until the lock opens. Premendo, il pulsante si stringe appena sotto il dito, la scritta diventa Keep holding e dal punto premuto cresce un cerchio ambra che copre il pulsante a poco a poco: dove passa il bordo del cerchio, la scritta e il lucchetto cambiano colore a metà. Intanto l'arco del lucchetto sale di poco, e nell'ultimo tratto il pulsante e l'arco tremano sempre di più. Lasciando prima della fine il cerchio torna indietro verso il punto da cui era partito, il pulsante torna alla sua misura con un rimbalzo e la riga dice Too soon: hold until the lock opens; un tocco breve fa un piccolo no e la riga dice Keep it pressed, a tap is not enough. Tenendo fino in fondo l'arco si alza e si apre ruotando, il pulsante diventa verde con la scritta Unlocked, si gonfia con un rimbalzo e un anello verde se ne allontana; la riga dice Tap to lock it again. Un tocco richiude: l'arco torna giù e scatta dentro, e il verde rientra nel lucchetto.

Come funziona

Due facce uguali

Il pulsante ha due facce una sopra l'altra, con le stesse parole e lo stesso lucchetto negli stessi punti: sotto quella grafite, sopra la copia ambra, che lo script fa dall'HTML. La copia è tagliata da un clip-path circle() che cresce dal punto premuto: dove passa il bordo, le parole cambiano colore a metà lettera.

Il tempo della pressione

Finché il dito tiene, sul ticker di GSAP la pressione sale da 0 a 1 in HOLD secondi, e il raggio del cerchio è quella frazione della distanza fra il punto premuto e l'angolo più lontano del pulsante: a 1 lo copre tutto. Il punto si misura nei pixel del pulsante anche quando è stretto da SQUEEZE.

Il tremito

Dopo il 60% il pulsante si sposta di lato con due onde veloci sommate (due seni a frequenze diverse) e l'arco del lucchetto ruota attorno alla base della sua gamba destra (svgOrigin 16 11), sempre di più fino alla fine, quando il pulsante si sposta di circa SHAKE pixel. Due onde invece di un numero a caso: trema senza saltare.

Lasciare e aprire

Lasciato presto, un tween riporta la pressione a 0 con power2.in, in DRAIN secondi per quanto era pieno, e il cerchio rientra nel punto da cui era partito; una pressione nuova riparte da lì. A 1 la classe is-open fa diventare verde la copia, l'arco sale e ruota di 28 gradi con elastic.out, il pulsante torna alla sua misura passandola, e un anello si allarga e svanisce.

Tasti, tocco e anteprima

Spazio e Invio tengono come un dito (le ripetizioni del tasto si ignorano) e il cerchio cresce dal lucchetto. Il pulsante ha touch-action none e niente menu del tocco lungo, così il dito non fa scorrere la pagina e non seleziona. Un clic da script (l'anteprima della libreria) è una mano finta: una volta lascia troppo presto, la volta dopo tiene fino in fondo, e sul lucchetto aperto lo richiude.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`HOLD`	script.js	`1.4`	I secondi da tenere premuto prima che il lucchetto si apra.
`DRAIN`	script.js	`0.5`	I secondi che il colore impiega a tornare indietro da pieno, quando si lascia troppo presto.
`SQUEEZE`	script.js	`0.96`	Quanto si stringe il pulsante sotto il dito.
`SHAKE`	script.js	`1.6`	Quanto trema il pulsante poco prima di aprirsi, in pixel.

Provali nel Playground

Quando usarla

Per le azioni che non si devono fare per sbaglio: sbloccare una porta o un'auto da un'app, confermare un pagamento o un trasferimento, cancellare qualcosa di importante, firmare, avviare una registrazione.

Sul telefono

Il dito tiene il pulsante senza far scorrere la pagina, senza selezionare il testo e senza aprire il menu del tocco lungo (touch-action none, user-select none, -webkit-touch-callout none e contextmenu annullato); il pulsante è largo 300 pixel, o lo schermo meno 48, e il cerchio parte da dove si appoggia il dito.

Con il movimento ridotto

Il colore cresce lo stesso, perché dice quanto manca, ma il pulsante non si stringe, non trema e non rimbalza; il lucchetto è aperto subito senza oscillare, l'anello non parte, il colore torna indietro in un attimo e le parole cambiano senza rotolare.

Trappole

Le due facce devono coincidere al pixel: la copia si fa dall'HTML con lo script, così una parola cambiata nell'HTML cambia in tutte e due, e le parole che cambiano si scrivono sempre nelle due facce insieme.
Un pulsante stretto da scale dà misure rimpicciolite con getBoundingClientRect: il punto del dito va riportato ai pixel del pulsante (offsetWidth diviso la larghezza misurata), o il cerchio parte spostato.
Con Spazio tenuto, quando il lucchetto si apre il tasto è ancora giù: il keyup che arriva dopo non deve richiuderlo. Si richiude solo con un tasto (o un dito) premuto quando era già aperto.
Su iPhone un tocco lungo seleziona il testo o apre il menu del tocco: servono user-select none, -webkit-touch-callout none e contextmenu annullato.
Un tremito con Math.random a ogni fotogramma fa saltare il pulsante: due seni a frequenze diverse danno un tremito fitto ma continuo.

Librerie

GSAP 3.15.0, Host Grotesk (font variabile) 5.3.0.

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

Collaudo

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