Il pulsante a molla da caricare

Pulsanti, Fisica, TestoGSAPMediaPeso compresso: Demo 6,1 KBGSAP 28 KBGratisScarica lo zip

Nello stile minimal: il Send invite di un’app per i team, una pillola sottile d’inchiostro su bianco con dentro una molla disegnata a filo. Tenendo premuto la molla si carica: le parole scivolano a destra, si stringono e si fanno più pesanti, la molla si chiude e diventa blu cobalto. Lasciando, la molla spara le parole fuori dalla pillola e Invite sent atterra mentre la molla oscilla e si ferma.

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 spring-loaded button</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the spring-loaded button: the Send invite of a team app, a thin ink pill on white with a hairline coil spring
         inside, between the words and the right end. Press and hold to load it: the words slide right, narrow and
         get heavier, and the coil closes up. Let go and the spring fires the words out of the left end; Invite sent
         rides in on the rest of the swing and settles. A short click loads and fires it by itself -->
    <div class="coil" data-coil>
      <button class="coil__btn" type="button" data-btn data-autoclic>
        <span class="coil__track" aria-hidden="true">
          <span class="coil__word" data-word="a"></span>
          <span class="coil__word" data-word="b"></span>
          <svg class="coil__spring" data-spring>
            <path class="coil__wire" data-wire></path>
            <path class="coil__plate" data-plate></path>
            <path class="coil__ticks" data-ticks></path>
            <path class="coil__lit" data-lit></path>
          </svg>
        </span>
        <span class="sr" data-label></span>
      </button>
      <p class="coil__note"><svg class="coil__check" viewBox="0 0 14 14" aria-hidden="true"><path d="M2.5 7.4 5.6 10.3 11.5 3.8" pathLength="1" data-check></path></svg><span data-note></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.

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 molla da caricare» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco una pillola sottile, alta 60 pixel, col solo contorno d’inchiostro: a sinistra la scritta Send invite in Archivo, a destra una molla disegnata con un filo sottile, fra una piccola piastra appoggiata alle parole e il fondo della pillola; sopra la molla sette tacche grigie chiarissime. Sotto la pillola, piccola e grigia, la riga To ana@northfield.studio. Col mouse sopra la molla si chiude di qualche pixel. Tenendo premuto la molla si carica: la piastra e le parole scivolano a destra, la molla si chiude, le tacche si accendono una a una in blu cobalto, la molla e le parole diventano blu, le parole si stringono sull’asse della larghezza e si fanno più pesanti, e il contorno della pillola si ispessisce appena; a carica piena la piastra trema sotto il dito. Lasciando, la molla scatta: la piastra corre a sinistra oltre il suo posto, le parole partono con la sua velocità ed escono dal lato sinistro della pillola, la pillola fa un piccolo rinculo dall’altra parte, e Invite sent cade al suo posto un pixel troppo in basso e torna su, mentre la molla oscilla avanti e indietro e si ferma, sempre più larga e leggera nel rimbalzo. La riga sotto diventa Ana will get it in a moment, con davanti una piccola spunta blu che si disegna. Un clic breve, la tastiera o l’anteprima caricano e sparano da soli; una spinta debole fa solo rimbalzare la molla. Premuto di nuovo, torna Send invite.

Come funziona

Un numero solo

Tutto viene dalla distanza della piastra dal suo posto, x: positiva quando la molla è carica, negativa quando oscilla oltre. A ogni fotogramma si ridisegnano da lì la molla (un zigzag di TURNS giri fra la piastra e il fondo), la piastra, le tacche accese, il colore che va dall’inchiostro al cobalto, lo spessore del contorno, e la larghezza, il peso e il posto delle parole, incollate alla piastra.

Caricare tenendo premuto

Mentre il dito tiene, la piastra è tirata verso un bersaglio che cresce come 1 meno e alla meno il tempo, fino a TRAVEL pixel in circa LOAD secondi, con una molla rigida e molto smorzata che la segue senza rimbalzi. A carica piena si aggiunge un tremito di quattro decimi di pixel.

Lo sparo

Lasciando, la piastra diventa una molla smorzata intorno a zero (STIFF, DAMP), col passo di tempo limitato a 1/30 di secondo: va oltre il suo posto e torna. Se era carica almeno al 30 per cento, al primo passaggio per lo zero le parole si staccano con la velocità della piastra, accelerano e si spengono uscendo a sinistra, e quelle nuove cadono sulla piastra con un tween di GSAP.

Le parole sugli assi

La larghezza va da 100 a 100 meno SQUEEZE con la carica e sale fino a 122 quando la molla oscilla oltre lo zero; il peso va da 420 a 660. Le parole sono incollate alla piastra dal loro bordo destro, quindi stringendosi si allontanano dal bordo sinistro come schiacciate.

Pointer, tastiera, anteprima

pointerdown carica e cattura il puntatore, pointerup spara; una pressione più corta di 200 millesimi continua a caricare da sola e poi spara. Un clic senza puntatore (tastiera, anteprima: detail uguale a zero) carica e spara da solo. Quando niente si muove il ciclo si toglie dal ticker di GSAP.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`LABEL`	script.js	`Send invite`	Le parole a riposo.
`DONE`	script.js	`Invite sent`	Le parole quando l’invito è partito.
`NOTE`	script.js	`To ana@northfield.studio`	La riga piccola sotto la pillola.
`NOTE_DONE`	script.js	`Ana will get it in a moment`	La riga piccola quando l’invito è partito.
`LOAD`	script.js	`0.9`	I secondi da tenere premuto per caricare tutta la molla.
`TRAVEL`	script.js	`42`	Di quanti pixel si chiude la molla carica.
`STIFF`	script.js	`260`	La rigidità della molla: più alta, spara più veloce.
`DAMP`	script.js	`9`	Quanto in fretta si spegne l’oscillazione dopo lo sparo.
`TURNS`	script.js	`9`	I giri della molla.
`SQUEEZE`	script.js	`30`	Quanto si stringono le parole con la molla carica.

Provali nel Playground

Quando usarla

Per un’azione che parte e non torna indietro e che vale la pena sentire: mandare un invito o un messaggio, pubblicare, lanciare un’iscrizione. Tenere premuto evita gli invii per sbaglio, e il clic breve resta per chi ha fretta.

Sul telefono

La pillola si stringe fino a 32 pixel dai bordi e la molla si ricalcola sulla larghezza vera. Il dito che tiene carica come il mouse, con la pillola che non fa scorrere la pagina mentre la si tiene; il tocco breve carica e spara da solo. La molla che si chiude al passaggio c’è solo col mouse.

Con il movimento ridotto

Niente molla che si muove né parole che volano: al clic le parole si scambiano in dissolvenza, la riga sotto cambia e la spunta compare.

Trappole

Il clic arriva dopo pointerup: senza guardare detail il pulsante sparava due volte. Il clic con detail uguale a zero è solo quello della tastiera o dell’anteprima.
Le parole che cambiano larghezza a ogni fotogramma spostano il loro bordo: sono incollate alla piastra dal lato destro, e la larghezza si rilegge dopo aver cambiato gli assi.
La molla tenuta col dito faceva scorrere la pagina sul telefono: touch-action none sulla pillola e il puntatore catturato.

Librerie

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

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

Collaudo

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