Il pulsante della mancia

Pulsanti, SVG, FisicaGSAPMediaPeso compresso: Demo 5,3 KBGSAP 28 KBGratisScarica lo zip

Ogni pressione lancia una moneta dal pulsante nel barattolo di vetro: la moneta vola in un arco girandosi su sé stessa, entra dalla bocca, cade sul mucchio con un piccolo rimbalzo, il barattolo oscilla e il totale sale. Premendo tante volte, volano tante monete insieme.

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 tip button</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/afacad@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the tip button: every press throws a coin from the button into the glass jar, turning over in the air; it
         lands on the pile and the total under the button goes up. Above the jar there is nothing: the coins fly there -->
    <div class="tip" data-tip data-autoclic>
      <div class="tip__jar">
        <svg class="tip__art" aria-hidden="true" data-art></svg>
      </div>
      <button class="tip__btn" type="button" data-btn>
        <span class="tip__coin" aria-hidden="true" data-coin></span>
        <span>Tip $1</span>
      </button>
      <p class="tip__total"><span class="tip__roll"><span data-total>$0</span></span> <span class="tip__said">tipped this week</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.

15 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 della mancia» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco un barattolo di vetro con la scritta TIPS e sei monete d'oro sul fondo, sotto un pulsante verde scuro con una moneta e Tip $1, e sotto ancora la riga $6 tipped this week; sopra il barattolo c'è solo spazio vuoto, dove volano le monete. All'arrivo le monete cadono nel barattolo una dopo l'altra rimbalzando e il pulsante sale dal basso. Premendo, la moneta del pulsante pulsa, il pulsante si stringe e torna, e dalla moneta del pulsante ne parte una uguale che vola in un arco sopra la bocca del barattolo girandosi su sé stessa, come una moneta lanciata; accanto alla bocca compare un +$1 che sale e svanisce. La moneta entra, ora dietro il vetro, cade sul mucchio nel suo posto e rimbalza appena, il barattolo oscilla sulla base e il totale rotola sul numero nuovo. Le monete si dispongono a strati, quattro e poi tre negli spazi fra quelle sotto; quando il barattolo è pieno, le nuove si posano in cima e spariscono nel mucchio.

Come funziona

Un disegno su tutto il componente

Un solo SVG copre tutto il componente, con 60 pixel di margine, e ha quattro gruppi in quest'ordine: il vetro dietro, il mucchio, il davanti del vetro (orlo, riflesso e scritta) e l'aria. Il barattolo si disegna dove la sua scatola è nella pagina (offsetLeft e offsetTop), così la moneta vola dal pulsante al barattolo nello stesso disegno.

L'arco e il giro

Il volo è una curva di Bézier quadratica dalla moneta del pulsante, misurata a ogni lancio, a sopra il posto che la aspetta, all'altezza della bocca, con il punto di controllo TOSS pixel sopra il più alto dei due capi. La faccia è un cerchio schiacciato in verticale di |cos(t · SPINS · π)|, mai meno di 0,1: si vede sempre più di taglio e poi di nuovo piena, mentre gira piano su sé stessa.

Dentro il vetro

Alla bocca la moneta passa nel gruppo del mucchio, che sta sotto il davanti del vetro: da lì si vede attraverso il vetro. Cade con power2.in nel tempo di una caduta vera da quell'altezza (radice di 2h su 2600), poi lascia il posto a una moneta coricata, bordo ed ellisse, che rimbalza di 5 pixel, e il barattolo oscilla di 1,6 gradi attorno al centro della base con elastic.out.

Il mucchio

I posti sono a strati alterni di quattro e tre monete, 6 pixel più su a ogni strato e ognuno spostato di poco, così non sembrano una griglia; oltre le 26 monete le nuove si posano in cima e svaniscono. GSAP muove solo il gruppo interno di una moneta coricata: quello esterno ha il posto nell'attributo transform, e un transform di GSAP lo sostituirebbe.

Il totale e l'anteprima

Il totale sale quando la moneta tocca il mucchio: esce in alto e il numero nuovo entra dal basso con back.out(2), e una regione aria-live dice quanto è stato dato. Ogni pressione è indipendente, così più monete volano insieme. Un clic da script (l'anteprima della libreria) lancia due monete, a 0,32 secondi l'una dall'altra.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`TOSS`	script.js	`110`	Quanto in alto vola la moneta sopra la bocca del barattolo, in pixel.
`SPINS`	script.js	`2`	Quante volte la moneta si gira in aria.
`FLIGHT`	script.js	`0.7`	I secondi dal pulsante alla bocca del barattolo.
`START`	script.js	`6`	Le monete già nel barattolo.

Provali nel Playground

Quando usarla

Per mance e piccole donazioni ripetute: il barattolo delle mance di un bar o di chi crea contenuti, il sostegno a un podcast, una raccolta fondi, i punti di una carta fedeltà, un salvadanaio in un'app di risparmio.

Sul telefono

Il barattolo è largo 168 pixel e il pulsante alto almeno 56, tutto sta in uno schermo stretto; ogni tocco lancia una moneta senza aspettare il doppio tocco (touch-action manipulation), e toccando di fila volano più monete insieme.

Con il movimento ridotto

Niente volo: la moneta compare sul mucchio con una dissolvenza di 0,2 secondi, senza il +$1, il totale cambia senza rotolare, il pulsante e la sua moneta non pulsano e il barattolo non oscilla; all'arrivo nulla si muove.

Trappole

Un transform di GSAP su un elemento SVG che ha già un attributo transform lo sostituisce: per questo ogni moneta coricata ha due gruppi, quello esterno col posto e quello interno che GSAP muove.
La moneta deve passare dietro il vetro solo quando entra dalla bocca: si sposta di gruppo (appendChild nel mucchio) a metà animazione, invece di disegnarla due volte.
Il punto di partenza si misura a ogni lancio con getBoundingClientRect, perché il pulsante e la sua moneta pulsano: misurato una volta sola, le monete partirebbero dal posto sbagliato.
Il disegno si rifà a una nuova misura della finestra e dopo l'arrivo del font, perché il barattolo prende il suo posto dalla pagina; le monete già sul mucchio si ridisegnano nei loro posti.
Il totale che rotola va interrotto se arriva un'altra moneta (kill della timeline), o due rotolamenti uno sull'altro lascerebbero il numero a metà strada.

Librerie

GSAP 3.15.0, Afacad (font variabile) 5.3.0.

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

Collaudo

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