Il pulsante che copia
Pulsanti, Testo, SVG, Fisica
NuovaGratis
Tutti i componenti
Il pulsante col nastro segnalibro
Nello stile minimal: il Save for later di un’app di lettura, una pillola sottile d’inchiostro su bianco. Premuto, dal bordo di sotto scende un nastrino vermiglio come quello cucito nel dorso di un libro rilegato: si srotola, oscilla sul suo punto di cucitura e si posa dritto, mentre arriva Saved, prima largo e leggero, poi stretto e pesante. Premuto di nuovo, il nastro viene tirato su dentro la pillola.
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 bookmark ribbon 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 bookmark ribbon button: the Save for later of a reading app, a thin ink pill on white. Pressed, a thin
vermilion ribbon drops out of the bottom edge of the pill like the ribbon of a hardback, swings on its
stitch and settles; the words become Saved. Pressed again, the ribbon is pulled back up into the pill -->
<div class="mark" data-mark>
<div class="mark__wrap">
<button class="mark__btn" type="button" aria-pressed="false" data-btn data-autoclic>
<span class="mark__words">
<span class="mark__word" data-word="rest">Save for later</span>
<span class="mark__word mark__word--done" data-word="done" aria-hidden="true">Saved</span>
</span>
</button>
<svg class="mark__ribbon" aria-hidden="true" data-ribbon>
<path class="mark__shade" data-shade></path>
<path class="mark__tape" data-tape></path>
<path class="mark__stitch" data-stitch></path>
</svg>
</div>
<p class="mark__note" data-note>Twelve minutes of reading</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.
18 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 col nastro segnalibro» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una pillola sottile, alta 60 pixel, col solo contorno d’inchiostro e dentro la scritta Save for later in Archivo; sotto, a sinistra, piccola e grigia, la riga Twelve minutes of reading. Passandoci sopra col mouse le parole si allargano appena e dal bordo di sotto, verso destra, spunta per pochi pixel la punta di un nastrino vermiglio, che dondola. Premuta, la pillola cede un poco e torna con un rimbalzo; la scritta si stringe e sale fuori, e il nastrino scende dalla pillola come il segnalibro di un libro rilegato: si srotola, va qualche pixel più giù e torna su come una molla, poi oscilla sul suo punto di cucitura, con la parte bassa che resta indietro come stoffa, finché si ferma dritto. La punta è tagliata a coda di rondine. Intanto atterra Saved, prima largo e leggero, poi stretto e pesante, un pixel troppo in basso e di nuovo al suo posto, e la riga sotto diventa In your reading list. Muovendo il mouse sopra la pillola salvata il nastro si muove. Premuta di nuovo, il nastrino fa un piccolo strattone dall’altra parte e viene tirato su dentro la pillola, e torna Save for later.
Come funziona
Un pendolo smorzato
Il nastro ha tre numeri: la lunghezza, l’angolo e la velocità dell’angolo. A ogni fotogramma una molla riporta l’angolo a zero (STIFF) e uno smorzamento ne mangia la velocità (DAMP), col passo di tempo limitato a 1/30 di secondo. Quando angolo e velocità sono quasi zero e nessun tween sta muovendo il nastro, il ciclo si toglie dal ticker di GSAP e non si ridisegna più niente.
La stoffa che resta indietro
Il nastro è una linea centrale di dieci pezzi: ogni pezzo ha l’angolo del pendolo più una piega che cresce col quadrato della distanza dal punto di cucitura, contraria alla velocità. Così, mentre oscilla, la parte bassa resta indietro e il nastro si curva come stoffa. I due bordi stanno a mezza larghezza ai lati della linea, e in fondo il taglio a coda di rondine rientra di NOTCH pixel.
Il nastro che cade
La lunghezza la muove GSAP: scende con una curva In fino a quattro pixel oltre LENGTH, e nell’istante in cui si ferma il pendolo riceve un colpo di velocità; poi la lunghezza torna a LENGTH con un elastico. Tirandolo su il colpo va dall’altra parte e la lunghezza torna a zero con una curva In più dura.
Le parole che atterrano
Archivo ha gli assi di larghezza e di peso. La scritta di prima esce stringendosi e salendo; quella nuova parte larga 116 e peso 320, sale da sotto fino a un pixel più in basso del suo posto e si sistema, mentre larghezza e peso vanno a 92 e 640.
Accessibile
È un button vero con aria-pressed, che dice se il pezzo è salvato; una riga aria-live annuncia il nuovo stato; il fuoco da tastiera ha l’anello staccato dal bordo. Il nastro è un SVG decorativo con aria-hidden.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LABEL | script.js | Save for later | Le parole a riposo. |
DONE | script.js | Saved | Le parole quando il pezzo è salvato. |
NOTE | script.js | Twelve minutes of reading | La riga piccola sotto la pillola. |
NOTE_DONE | script.js | In your reading list | La riga piccola quando il pezzo è salvato. |
LENGTH | script.js | 46 | Quanto scende il nastro sotto la pillola, in pixel. |
WIDTH | script.js | 12 | La larghezza del nastro, in pixel. |
SWING | script.js | 1 | Quanto oscilla il nastro quando cade; 0 lo tiene fermo. |
STIFF | script.js | 34 | La molla che riporta il nastro dritto. |
DAMP | script.js | 3.2 | Quanto in fretta si spegne l’oscillazione. |
Quando usarla
Per un pulsante Salva che deve sembrare un gesto: salvare un articolo per dopo in un blog o in una rivista, mettere un libro nella lista di lettura, segnare una ricetta.
Sul telefono
La pillola si stringe fino a 32 pixel dai bordi e il nastro si riposiziona sulla larghezza vera. Il tocco preme la pillola come il clic; la punta che spunta al passaggio e il nastro che si muove col mouse ci sono solo col mouse.
Con il movimento ridotto
Niente oscillazioni né rimbalzi: il nastro compare e sparisce con una dissolvenza già alla sua lunghezza, e le parole si scambiano in dissolvenza.
Trappole
- Il nastro dentro la pillola sarebbe tagliato dall’overflow nascosto: sta in un SVG fratello, sotto la pillola, così il bordo della pillola copre il punto di cucitura e il nastro sembra uscire da sotto.
- La riga piccola centrata finiva sotto il nastro appeso: sta a sinistra, con una larghezza massima che lascia libero il posto del nastro.
- Due clic veloci accavallano la caduta e la salita: durante la timeline i clic si ignorano.
- Il pendolo non deve girare per sempre: si toglie dal ticker quando è fermo e si risveglia solo con un colpo o un tween della lunghezza.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,0 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 22 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.
