Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
Il pulsante del badge
Il Sign in d'ufficio col badge: un tesserino appeso al cordino di un avvolgicavo a molla sopra la pillola, e la pillola è il lettore, con una fessura lungo il bordo in alto. Al clic il badge viene tirato giù, entra nella fessura dietro il fronte della pillola, la striscia magnetica scorre fino in fondo con una riga di luce sotto, il lettore risponde Signing in… e poi Signed in · Rui Costa; lasciato, l'avvolgicavo riavvolge il cordino e il badge risale oscillando. Sign out lo infila nel lettore, lo fa uscire e torna appeso. Il badge si può anche prendere e strisciare a mano.
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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The badge swipe button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the badge swipe button: the Sign in of an office, a studio or a lab. An ID badge hangs on a spring reel over the
pill, and the pill is the reader: a slot runs along its top edge. A click pulls the badge down, swipes it
through the slot and lets it go: the reel winds the cord back in and the badge swings. Signing out dips the
badge into the reader and it comes out and hangs again. The badge can also be grabbed and swiped by hand -->
<div class="swipe" data-swipe>
<!-- the reel, the cord and the badge, drawn by the script, between the back of the slot and the front of the pill -->
<canvas class="swipe__rig" aria-hidden="true" data-rig></canvas>
<span class="swipe__grip" aria-hidden="true" data-grip></span>
<button class="swipe__btn" type="button" data-btn data-autoclic>
<span class="swipe__back" aria-hidden="true"></span>
<span class="swipe__front" aria-hidden="true"></span>
<span class="swipe__faces">
<span class="swipe__face" data-face="rest">
<span class="swipe__word" data-wide="Sign in" data-rest-text>Sign in</span>
</span>
<span class="swipe__face swipe__face--busy" data-face="busy" aria-hidden="true">
<span class="swipe__shine" data-busy-text>Signing in…</span>
</span>
<span class="swipe__face swipe__face--done" data-face="done" aria-hidden="true">
<span class="swipe__who"><span data-done-text>Signed in</span> · <b data-name-text>Rui Costa</b></span>
<span class="swipe__out" data-out-text>Sign out</span>
</span>
<span class="swipe__face swipe__face--busy" data-face="gone" aria-hidden="true">
<span class="swipe__gone" data-gone-text>Signed out</span>
</span>
</span>
</button>
<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.
27 valori da cambiare
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 del badge» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una pillola color grafite, alta 60 pixel, che è anche un lettore di badge: lungo il bordo in alto corre una fessura scura con un filo di luce sul labbro. Sopra la sua estremità sinistra è appeso un avvolgicavo cromato con la sua clip da cintura, e dal suo beccuccio scende un cordino verde con un badge orizzontale bianco: la banda verde in alto con la fessura per la cinghietta trasparente, una piccola foto, il nome Rui Costa, la parola Studio, qualche barra di un codice e la striscia magnetica scura lungo il bordo in basso. All'arrivo il badge esce dall'avvolgicavo e si assesta dondolando. Col mouse sulla pillola il badge si muove sul cordino come se avesse sentito il lettore; la scritta si allarga sull'asse wdth e il fondo si gonfia con un rimbalzo. Al clic una mano invisibile tira giù il badge, dritto, fino all'inizio della fessura: il badge entra dietro il fronte della pillola, così la scritta resta sempre davanti, e la striscia magnetica scorre fino all'altra estremità, mentre l'avvolgicavo dà cordino e una riga di luce verde corre nella fessura sotto il badge. Il lettore risponde con le parole: Signing in… con un riflesso, poi Signed in · Rui Costa e una piccola pillola Sign out. Il badge esce dalla fessura e viene lasciato: la molla dell'avvolgicavo riavvolge il cordino, rallentando sull'ultimo tratto, il badge viene tirato in alto, il cordino si allenta, il badge ricade sul cordino, gira un poco sulla cinghietta e oscilla finché l'aria lo ferma. Il secondo clic tira giù il badge e lo infila nel lettore, dove resta un momento con la riga di luce accesa (Signing out…), poi esce e torna appeso; Signed out, e di nuovo Sign in. Il badge si può anche prendere col mouse o col dito: la pillola è solida e lo fa entrare solo dalla fessura; strisciato per più di metà fessura fa entrare, infilato nel lettore fa uscire.
Come funziona
Tre strati: dietro, la tela, davanti
La pillola è fatta di due strati: il fondo della fessura, scuro, dietro la tela, e il fronte, tagliato 10 pixel sotto il bordo con clip-path, davanti. Il pulsante non ha z-index suo, quindi la tela col badge sta in mezzo: quando il badge scende nella fessura sparisce dietro il fronte, e non copre mai la scritta.
Il cordino in dinamica a posizioni
Il cordino è una catena di dodici punti: a ogni passo la gravità e l'aria spostano i punti, poi dieci giri di vincoli rimettono a posto le maglie, che si possono allentare ma non allungare, e la velocità nasce da dove i punti sono finiti. Il badge è un corpo rigido appeso all'ultimo punto: la clip e il suo centro, a distanza fissa, così oscilla come un pendolo vero.
L'avvolgicavo a molla
La lunghezza del cordino cambia: quando la mano tira, l'avvolgicavo dà tutto il cordino che serve; lasciato, la molla lo riavvolge a velocità REEL, frenando sull'ultimo tratto come un avvolgicavo vero. Il badge viene tirato su, il cordino si allenta e lui ricade e oscilla. La faccia dell'avvolgicavo gira con il cordino che entra ed esce.
La mano e lo strisciamento
Durante la strisciata la clip e il centro del badge seguono una mano mossa da una timeline GSAP: giù dritto, dentro la fessura, lungo tutta la fessura, fuori. Lasciato, il badge tiene la velocità che la mano gli ha dato e prende un colpetto di torsione sulla cinghietta, una molla a parte che lo stringe in larghezza come se girasse.
Solido dove serve
Fuori dalla mano il cordino e il badge non passano la pillola: l'angolo più basso del badge si appoggia sul suo bordo e scivola, e il badge non può girare sopra l'avvolgicavo. Trascinato a mano, il badge entra nella pillola solo dalla fessura e solo fino alla sua profondità; il lettore conta quanta fessura ha percorso.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LABEL | script.js | 'Sign in' | La scritta a riposo. |
BUSY | script.js | 'Signing in…' | La scritta mentre il lettore legge il badge. |
DONE | script.js | 'Signed in' | La scritta una volta dentro, prima del nome. |
PERSON | script.js | 'Rui Costa' | Il nome sul badge e nella scritta (inventato: non si manda niente da nessuna parte). |
ROLE | script.js | 'Studio' | La parola piccola sotto il nome, sul badge. |
LOGOUT | script.js | 'Sign out' | La piccola pillola che fa uscire. |
LEAVING | script.js | 'Signing out…' | La scritta mentre esce. |
GONE | script.js | 'Signed out' | La scritta una volta fuori, prima di tornare a Sign in. |
SWIPE | script.js | 0.6 | I secondi della strisciata lungo la fessura. |
GRAVITY | script.js | 2200 | Quanto forte cade il badge, in pixel al secondo al quadrato. |
REEL | script.js | 420 | Quanto in fretta l'avvolgicavo riavvolge il cordino, in pixel al secondo. |
AIR | script.js | 1.1 | Quanto l'aria frena le oscillazioni: 0.2 oscilla a lungo, 4 quasi non oscilla. |
Quando usarla
Per l'accesso di un'app di lavoro: un'intranet, uno studio, un coworking, un laboratorio, il pannello di un ufficio. Sta da solo su fondo chiaro; in un sito vero la funzione che entra davvero va al posto della strisciata, e il nome arriva dall'account.
Sul telefono
La pillola si stringe allo schermo (al massimo larga quanto lo schermo meno 32 pixel) e la fessura con lei; il badge resta della sua misura. Il tocco sulla pillola fa la strisciata; il badge si prende anche col dito, e mentre lo si tiene la pagina non scorre.
Con il movimento ridotto
Niente oscillazioni né strisciate: il badge si spegne dove è appeso e si riaccende già nella fessura, fermo, con la riga di luce in dissolvenza; poi si spegne e si riaccende appeso. Le scritte cambiano in dissolvenza e la pillola non si gonfia.
Trappole
- Il badge strisciato sopra la pillola copriva la scritta: la pillola è divisa in due strati, il fondo della fessura dietro la tela e il fronte davanti, e il pulsante non ha z-index suo, così la tela sta in mezzo e il badge sparisce dietro il fronte.
- Lasciato all'estremità destra della fessura, il badge cadeva come un pendolo col cordino lungo e passava sotto la pillola: la pillola è solida per il cordino e per l'angolo più basso del badge, e la mano lo alza e lo avvicina all'avvolgicavo prima di lasciarlo.
- L'avvolgicavo riavvolgeva a tutta velocità fino all'ultimo e lanciava il badge sopra se stesso, fuori dalla tela: frena sull'ultimo tratto come uno vero, la clip si ferma sotto il beccuccio e il badge non può girare oltre l'orizzontale.
- Il valore REEL e l'oggetto con la posizione dell'avvolgicavo avevano lo stesso nome: dentro la funzione l'oggetto copriva la costante e la velocità diventava NaN. L'oggetto si chiama HUB.
- Trascinato a mano il badge sembrava dentro la fessura ma il lettore non lo sentiva: contava il badge dentro solo a fondo corsa. Ora basta che la striscia magnetica passi il labbro.
Librerie
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 9 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.
