La valutazione a stelle
Valutazioni, SVG, Hover
NuovaGratis
Tutti i componenti
Il pulsante della molletta
Nello stile minimal, su bianco: il Save for later di un sito di ricette, con una piccola molletta di legno pinzata sul bordo della pillola. Sotto il puntatore la molletta si inclina e apre appena le ganasce. Premuta, la molletta si apre attorno alla sua molla d’acciaio, un cartellino di carta scivola fra le ganasce e la molletta lo pinza con uno scatto: Saved. Premuta di nuovo, lascia andare il cartellino.
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 clothespin 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 clothespin button: the Save for later of a recipe site, on white. A small beech clothespin is clipped on
the top edge of the pill. Pressed, the pin opens, a paper tag slides into its jaws and the pin snaps shut on it:
Saved. Pressed again, the pin lets the tag go -->
<div class="pin" data-pin>
<div class="pin__frame" data-frame>
<svg class="pin__art" viewBox="-60 -110 120 150" aria-hidden="true" data-art>
<defs>
<linearGradient id="legno" x1="0" x2="1" y1="0" y2="0">
<stop offset="0" stop-color="#c79f6c"/>
<stop offset="0.35" stop-color="#e3c595"/>
<stop offset="0.7" stop-color="#d6b27f"/>
<stop offset="1" stop-color="#b98d58"/>
</linearGradient>
<linearGradient id="acciaio" x1="0" x2="0" y1="0" y2="1">
<stop offset="0" stop-color="#e9ecef"/>
<stop offset="0.45" stop-color="#9aa1a8"/>
<stop offset="1" stop-color="#5d646b"/>
</linearGradient>
<filter id="morbida" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="2.4"/></filter>
</defs>
<g data-tag class="pin__tag">
<rect x="-22" y="-10" width="44" height="58" rx="2.5" class="pin__tag-carta"/>
<rect x="-22" y="40" width="44" height="2.6" class="pin__tag-riga"/>
<text x="0" y="29" text-anchor="middle" class="pin__tag-testo">SAVED</text>
</g>
<ellipse cx="3" cy="8" rx="18" ry="5" class="pin__ombra" filter="url(#morbida)" data-shadow/>
<g transform="scale(1.6 1)">
<path class="pin__notch" d="M-3 -1 L3 -1 L3 5 L-3 5 Z M-0.8 5 L0.8 5 L0.8 17 L-0.8 17 Z"/>
<g data-arm="l" class="pin__arm">
<path class="pin__wood" d="M -8.2 -96 C -13.4 -95 -14.41 -88 -13.23 -78 L -8.2 -22 C -8 -14 -9.6 -8 -9.4 -2 L -8.4 14 C -8.2 17 -6.4 18.6 -3.8 18.2 L -0.6 17.4 L -0.6 8 L -3.4 5 L -3.4 -1 L -0.6 -4 L -0.6 -33 Z"/>
<path class="pin__grain" d="M -11.62 -86 C -9.26 -60 -6.09 -40 -6.2 -24 M -9.81 -90 C -8.04 -70 -5.08 -50 -4.2 -30 M -7.2 0 C -7 6 -6.8 10 -6.4 14"/>
<path class="pin__edge" d="M -8.1 -95 L -0.6 -4"/>
</g>
<g data-arm="r" class="pin__arm">
<path class="pin__wood" d="M 8.2 -96 C 13.4 -95 14.41 -88 13.23 -78 L 8.2 -22 C 8 -14 9.6 -8 9.4 -2 L 8.4 14 C 8.2 17 6.4 18.6 3.8 18.2 L 0.6 17.4 L 0.6 8 L 3.4 5 L 3.4 -1 L 0.6 -4 L 0.6 -33 Z"/>
<path class="pin__grain" d="M 11.62 -86 C 9.26 -60 6.09 -40 6.2 -24 M 9.81 -90 C 8.04 -70 5.08 -50 4.2 -30 M 7.2 0 C 7 6 6.8 10 6.4 14"/>
<path class="pin__edge pin__edge--r" d="M 8.1 -95 L 0.6 -4"/>
</g>
<g class="pin__spring" data-spring>
<path class="pin__wire" d="M-10.5 -40 C-13 -44 -12 -50 -9.6 -52 M10.5 -40 C13 -44 12 -50 9.6 -52"/>
<rect x="-11.5" y="-40" width="23" height="9" rx="4.5" class="pin__coil"/>
<path class="pin__turns" d="M-7.5 -40 V-31 M-4 -40 V-31 M-0.5 -40 V-31 M3 -40 V-31 M6.5 -40 V-31"/>
<path class="pin__shine" d="M-9.5 -38.4 H9.5"/>
</g>
</g>
</svg>
<button class="pin__btn" type="button" data-btn data-autoclic aria-pressed="false">
<span class="pin__words">
<span class="pin__word" data-word="rest" data-rest-text>Save for later</span>
<span class="pin__word pin__word--done" data-word="done" aria-hidden="true" data-done-text>Saved</span>
</span>
</button>
</div>
<p class="pin__note" data-note>Lemon tart · 35 min</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 della molletta» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una pillola alta 58 pixel col contorno sottile grigio chiaro e dentro Save for later in Archivo; sul bordo in alto, verso destra, è pinzata di sbieco una molletta da bucato di faggio disegnata in SVG, con le venature, lo spigolo chiaro, la tacca scura fra le ganasce, la molla d’acciaio arrotolata e la sua ombra morbida; sotto, la riga piccola Lemon tart · 35 min. Passandoci sopra il contorno si scurisce, la scritta si allarga e prende peso, e la molletta si inclina di più e apre appena le ganasce, come se un pollice premesse sulle sue code. Premuta, la pillola cede e torna con un rimbalzo; i due bracci della molletta si aprono attorno alla molla, che si stringe un poco, un cartellino di carta con una riga vermiglia e la scritta SAVED scende fra le ganasce, e la molletta si chiude di scatto con un piccolo superamento: tutta la molletta scende di un pixel e torna, il cartellino oscilla una volta e si posa. Le parole si scambiano: Saved arriva larga e leggera e si posa stretta e piena, e la riga sotto dice In your recipe box. Premuta di nuovo, la molletta si apre, il cartellino risale e sparisce, e la molletta si richiude sul bordo nudo.
Come funziona
Una molletta in SVG
La molletta sono due bracci speculari, ognuno un tracciato con la coda, la ganascia e la tacca, riempiti con una sfumatura di faggio e segnati da tre venature sottili e da uno spigolo chiaro; in mezzo la molla è un rettangolo arrotondato d’acciaio con cinque spire e un riflesso. Un gruppo li allarga una volta e mezza, così la molletta resta un disegno solo da muovere.
Un numero solo per aprirla
I due bracci girano attorno allo stesso punto, il centro della molla, uno di più gradi e l’altro di meno gradi: GSAP muove un numero solo, open, e a ogni passo lo applica ai due bracci con svgOrigin e stringe la molla in larghezza. Aprire è open a OPEN in due decimi con power2.out, chiudere è open a zero in SNAP secondi con back.out(3), che passa oltre lo zero e fa lo scatto.
Il cartellino
Il cartellino è disegnato dietro ai bracci: entra da 46 unità più in alto e storto di 14 gradi, scende in 0,34 secondi con power3.out mentre la molletta è aperta, e quando la molletta si chiude oscilla fino a meno 2 gradi con elastic.out. La molletta intera intanto scende di un pixel e torna con una molla.
Le parole
Archivo ha gli assi di larghezza e di peso: sotto il puntatore la scritta va a 108 di larghezza; Saved entra larga 124 e peso 300 e si posa a 100 e 520 con back.out, mentre la riga piccola cambia in dissolvenza.
Accessibile
È un button vero con aria-pressed, e una riga aria-live annuncia Saved; il fuoco da tastiera ha l’anello solo con la tastiera. Durante il movimento i clic si ignorano. Col movimento ridotto il cartellino compare e sparisce in dissolvenza e la molletta resta ferma.
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 col cartellino pinzato. |
NOTE | script.js | Lemon tart · 35 min | La riga piccola sotto la pillola. |
NOTE_DONE | script.js | In your recipe box | La riga piccola col cartellino pinzato. |
OPEN | script.js | 6 | Di quanti gradi si apre ogni braccio della molletta. |
SNAP | script.js | 0.24 | I secondi dello scatto con cui la molletta si chiude. |
TILT | script.js | 7 | Quanto è inclinata la molletta sulla pillola, in gradi. |
Quando usarla
Per un pulsante che mette da parte qualcosa: la ricetta da salvare per dopo, il prodotto nei preferiti, l’articolo nel segnalibro, l’annuncio da tenere d’occhio.
Sul telefono
La pillola si stringe fino a 42 pixel dai bordi e la molletta resta pinzata a destra. Il tocco pinza e lascia il cartellino come il clic; l’inclinazione del passaggio c’è solo col mouse.
Con il movimento ridotto
La molletta resta ferma, il cartellino compare e sparisce in dissolvenza e le parole si scambiano senza rimbalzi.
Trappole
- I bracci devono girare attorno al centro della molla, non al loro: con svgOrigin si dà a GSAP un punto del disegno, in unità del viewBox, uguale per tutti e due.
- Lo scatto viene dal back.out della chiusura, che porta i bracci un poco oltre lo zero, cioè le ganasce si stringono più del necessario e si riaprono: senza, la molletta si chiude come una porta lenta.
- Il cartellino va disegnato prima dei bracci, così sta fra le ganasce e non sopra: con l’ordine sbagliato sembrava appoggiato davanti alla molletta.
- Disegnata stretta come una molletta vera, a quella misura sembrava un bastoncino: i bracci sono allargati una volta e mezza da un gruppo con scale, e così si legge.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 4,6 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 24 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.
