Il pulsante da far scorrere

Pulsanti, Fisica, TransizioniGSAPMediaPeso compresso: Demo 4,9 KBGSAP 28 KBGratisScarica lo zip

Una manopola da trascinare fino in fondo al suo binario per confermare un pagamento: una scia verde la segue e lei si allunga con la velocità della mano; lasciata troppo presto torna indietro, in fondo il binario diventa verde e la freccia si fa spunta.

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 slide-to-confirm button</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/sora@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the button: a knob to drag to the end of its track. Let go too early and it runs back; at the end the track
         fills up green and the arrow turns into a tick. A plain click only nudges it; Enter or Space slides it all
         the way by itself -->
    <div class="slide" data-slide>
      <span class="slide__fill" aria-hidden="true" data-fill></span>
      <span class="slide__label" aria-hidden="true" data-label>Slide to pay <b data-amount></b></span>
      <span class="slide__done" aria-hidden="true" data-done>Payment sent</span>
      <button class="slide__knob" type="button" data-knob data-autoclic>
        <svg viewBox="0 0 24 24" aria-hidden="true"><path class="slide__arrow" data-arrow d="M4.5 12h14M13 6l6 6-6 6"/><path class="slide__tick" data-tick d="M5 12.5l4.6 4.6L19 7.6"/></svg>
      </button>
    </div>
    <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.

17 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 far scorrere» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero un binario scuro con una manopola bianca a sinistra, una freccia sopra, e la scritta Slide to pay €49. Trascinando la manopola, una scia verde la segue dall’inizio del binario, la scritta svanisce e scivola via mentre lei avanza, e la manopola si allunga e si assottiglia quanto più la mano va veloce. Lasciata prima dell’85% della corsa torna all’inizio e ci batte contro con un piccolo sobbalzo; arrivata in fondo, o lasciata oltre l’85%, il binario è tutto verde, la freccia scappa a destra, la manopola diventa nera, si gonfia un attimo e ci si disegna una spunta verde, e da sinistra entra la scritta Payment sent. Un clic semplice spinge la manopola un poco avanti e la lascia tornare, per far vedere cosa fare; Invio o Spazio la fanno scorrere fino in fondo da sola. A riposo la manopola si affaccia in avanti ogni quattro secondi e mezzo. Nella demo, dopo un momento, tutto torna all’inizio.

Come funziona

Un numero solo

Tutto viene da quanto è avanti la manopola, in pixel: diventa la sua x, la larghezza della scia (fino al bordo lontano della manopola, nascosta a riposo) e la dissolvenza della scritta, che sparisce a poco più di metà corsa.

Il trascinamento

La manopola è un pulsante: al pointerdown si cattura il puntatore (setPointerCapture), così il trascinamento continua anche fuori dalla manopola, e la sua x segue la mano, tenuta fra l’inizio e la fine del binario. Il binario ha touch-action: pan-y e la manopola none: sul telefono il dito trascina la manopola e la pagina scorre ancora in su e in giù.

L’allungamento

A ogni fotogramma si guarda di quanto si è spostata la manopola dal fotogramma prima: più va veloce, più si allunga in larghezza e si assottiglia in altezza, fino a STRETCH. La forma va verso quella giusta un po’ alla volta, e lasciata torna tonda con elastic.out.

Lasciare, e la fine

Lasciata sotto DONE_AT torna a zero in BACK secondi con power3.out, e quando tocca l’inizio si schiaccia e rimbalza. Sopra DONE_AT, o toccando la fine, la manopola arriva in fondo, la freccia esce, la manopola diventa nera, la spunta si disegna con stroke-dashoffset e la scritta della fine entra; la manopola prende aria-disabled e una riga per gli screen reader dice che il pagamento è partito.

Clic, tastiera e attesa

Un clic arriva anche dopo un trascinamento: quello si ignora. Un clic del mouse o un tocco (detail 1) danno solo una spinta; uno da tastiera o da uno script (detail 0) fa scorrere la manopola da sola in AUTO secondi. A riposo una spinta più piccola arriva ogni NUDGE secondi.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`AMOUNT`	script.js	`'€49'`	Quanto paga la manopola.
`DONE_AT`	script.js	`0.85`	Quanto deve essere avanti la manopola, lasciandola, per confermare: da 0 a 1.
`BACK`	script.js	`0.55`	I secondi della manopola che torna indietro, lasciata troppo presto.
`AUTO`	script.js	`0.8`	I secondi della corsa che la manopola fa da sola (Invio, Spazio).
`STRETCH`	script.js	`0.16`	Quanto si allunga la manopola trascinata in fretta.
`NUDGE`	script.js	`4.5`	I secondi fra due spinte della manopola a riposo; 0 per nessuna.
`HOLD`	script.js	`2.4`	I secondi in cui resta la fine, prima che la demo ricominci.

Provali nel Playground

Quando usarla

Per confermare qualcosa da cui non si torna indietro, dove un clic sbagliato costerebbe: un pagamento, un ordine, una prenotazione, la cancellazione di un account. Va bene soprattutto sul telefono, col pollice.

Sul telefono

Il binario si stringe alla larghezza dello schermo, fino a 380 pixel. Il dito trascina la manopola e la pagina continua a scorrere in verticale; un tocco senza trascinare dà la spinta.

Con il movimento ridotto

La manopola si trascina lo stesso ma non si allunga; lasciata presto torna all’inizio di colpo, Invio la porta in fondo di colpo, la fine compare senza disegnarsi e a riposo non ci sono spinte.

Trappole

Dopo un trascinamento il browser manda anche un clic: va riconosciuto e ignorato, o un trascinamento lasciato a metà diventerebbe subito una spinta. Su un telefono quel clic a volte non arriva, per questo il segno si azzera al tocco successivo.
Con un clic da tastiera il campo detail vale 0, col mouse 1 o più: è così che lo stesso clic fa scorrere tutta la manopola dalla tastiera e la spinge soltanto col mouse.
La scia a riposo è nascosta: anche coperta dalla manopola, il suo bordo farebbe un filo verde intorno al cerchio.
La forma della manopola è scritta a mano a ogni fotogramma: un quickTo di GSAP sulle stesse proprietà di un altro tween si rompe (scaleX not eligible for reset), e qui serve anche un rimbalzo elastico alla fine.

Librerie

GSAP 3.15.0, Sora (font variabile) 5.3.0.

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