Il pulsante della campanella

Pulsanti, Fisica, SVGGSAPImpegnativaPeso compresso: Demo 8,7 KBGSAP 28 KBGratisScarica lo zip

Il pulsante Subscribe di un canale, con una campanella d'ottone. Premendo, la campana oscilla come un pendolo e dentro il batacchio è un secondo pendolo: resta indietro, colpisce il bordo e a ogni colpo partono onde di suono disegnate, forti quanto il colpo, mentre il contatore degli iscritti sale col rullo delle cifre. Togliendo l'iscrizione la campana viene fermata e una barra la attraversa.

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 bell subscribe button</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/onest@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the subscribe button, with the subscriber count beside it and a hint under it. Subscribing, the bell swings
         like a pendulum with its clapper as a second pendulum inside it: each time the clapper strikes the rim, rings
         of sound go out, and the count rolls up like an odometer. Unsubscribing, the bell is stopped and a bar is
         drawn through it -->
    <div class="subscribe" data-subscribe>
      <div class="subscribe__row">
        <button class="sub" type="button" aria-pressed="false" aria-label="Subscribe to the channel" data-sub data-autoclic>
          <span class="sub__bell" aria-hidden="true">
            <svg class="sub__waves" viewBox="-90 -90 180 180" data-waves></svg>
            <svg class="sub__icon" viewBox="0 0 32 32" data-icon>
              <defs>
                <linearGradient id="brass" gradientUnits="userSpaceOnUse" x1="7" y1="0" x2="25" y2="0" data-light>
                  <stop offset="0" class="brass-a"/><stop offset="0.45" class="brass-b"/><stop offset="1" class="brass-c"/>
                </linearGradient>
              </defs>
              <g data-bell>
                <g data-clapper>
                  <path class="bell__rod" d="M16 9v15.6"/>
                  <circle class="bell__ball" cx="16" cy="26.6" r="2.7"/>
                </g>
                <path class="bell__loop" d="M14.2 5.6a1.8 1.8 0 1 1 3.6 0"/>
                <path class="bell__body" d="M16 5.4c-5.4 0-8 4-8 8.8v4.6c0 2.3-1.3 3.7-2.8 4.6-.6.4-.3 1.3.4 1.3h20.8c.7 0 1-.9.4-1.3-1.5-.9-2.8-2.3-2.8-4.6v-4.6c0-4.8-2.6-8.8-8-8.8z"/>
                <path class="bell__shine" d="M11.2 11.2c.7-1.8 2-2.9 3.4-3.3"/>
              </g>
              <path class="bell__slash" d="M5.4 4.6l21.8 23.6" pathLength="1" data-slash/>
            </svg>
          </span>
          <span class="sub__labels">
            <span class="sub__label" data-label="subscribe">Subscribe</span>
            <span class="sub__label" data-label="subscribed">Subscribed</span>
            <span class="sub__label sub__label--off" data-label="unsubscribe">Unsubscribe</span>
          </span>
        </button>
        <dl class="stat">
          <dt>Subscribers</dt>
          <dd><span class="count" data-count aria-hidden="true"></span><span class="sr" data-count-text></span></dd>
        </dl>
      </div>
      <p class="subscribe__hint"><span data-hint></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.

21 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 campanella» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero un pulsante corallo con una campanella d'ottone in un cerchio e la scritta Subscribe; accanto, il numero degli iscritti, 48,299, con sopra la parola Subscribers, e sotto una riga grigia, Get a ring when a new video is out. Col mouse sopra la campana dondola appena. Premendo, il pulsante diventa scuro e dice Subscribed, si stringe e torna con un rimbalzo, e la campana suona: oscilla attorno al suo anello fino a circa 45 gradi e dentro il batacchio oscilla per conto suo, resta indietro e colpisce il bordo, ora da una parte ora dall'altra. A ogni colpo dal lato colpito partono tre archi arancio che si allargano e svaniscono, più deboli dall'altro lato, tanto più ampi quanto più forte è il colpo, e il pulsante trema di un pelo. Le oscillazioni si spengono e i colpi diventano sempre più leggeri. La luce sull'ottone scorre mentre la campana gira. Intanto il numero degli iscritti sale a 48,300: le cifre che cambiano scorrono come un contachilometri, passando per tutte le cifre in mezzo, quelle a destra prima; la riga sotto dice New videos will ring the bell. Col mouse sopra, un pulsante già iscritto diventa Unsubscribe, si scalda verso il corallo e mostra una barra leggera sulla campana; premendo, la campana viene fermata, la barra la attraversa del tutto, il pulsante torna corallo, il numero torna a 48,299 e la riga dice Unsubscribed. The bell is quiet. Dopo qualche secondo la barra si ritira e la campana è di nuovo pronta.

Come funziona

Un doppio pendolo smorzato

La campana gira attorno al suo anello (angolo θ) e il batacchio è appeso un poco più sotto (angolo φ dalla verticale). A ogni fotogramma lo script scrive le equazioni del moto dei due angoli: una matrice di massa 2 × 2 che dipende da cos(θ − φ), i termini centrifughi con sin(θ − φ), il peso di ognuno e uno smorzamento sulla campana. Risolve il sistema con la formula del determinante e avanza in passi di 1/600 di secondo, col passo del fotogramma limitato a 1/30. Le frequenze proprie dei due pendoli sono i valori BELL e CLAPPER: lo script ricava da quelle la gravità e la rigidità che servono.

Il batacchio colpisce

Il batacchio è più lento della campana, così resta indietro. Quando il suo angolo rispetto alla campana supera il bordo (0,5 radianti) e sta ancora andando verso fuori, rimbalza: un impulso con coefficiente di restituzione 0,3 scambia la quantità di moto fra i due, quindi anche la campana sente il colpo. Se la velocità d'urto supera una soglia è un colpo vero, e la sua forza decide le onde.

La mano che suona

Premendo, la campana riceve una spinta di velocità e per mezzo secondo una forza nel verso in cui va, come una mano che la scuote: così arriva a circa 45 gradi e il batacchio colpisce subito. Togliendo l'iscrizione la mano la ferma: una forza contraria alla velocità e all'angolo la riporta giù in un attimo.

Le onde del suono

A ogni colpo, attorno al centro della campana (girato con lei) si aprono WAVES archi SVG dal lato colpito e altrettanti più deboli dall'altro. Ognuno è un tracciato con un arco «A» ridisegnato a ogni passo di un tween GSAP: il raggio cresce, il tratto si assottiglia, l'opacità sale in fretta e scende piano. La forza del colpo decide quanto vanno lontano e quanto sono chiari.

Il contatore a rulli e la barra

Ogni cifra del numero ha la sua fessura con overflow nascosto e una maschera sfumata sopra e sotto. Una cifra che cambia diventa una striscia con tutte le cifre di mezzo, da quella vecchia alla nuova, che scorre verso l'alto con back.out; le cifre a destra partono prima. La barra sulla campana è un tracciato con pathLength 1 disegnato con stroke-dashoffset, con un bordo del colore del pulsante fatto di due drop-shadow, così taglia la campana in modo pulito.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`COUNT`	script.js	`48299`	Gli iscritti prima di te.
`SWING`	script.js	`1`	Quanto forte si suona la campana (1 = circa 45 gradi).
`RING`	script.js	`0.8`	I secondi in cui l'oscillazione scende a un terzo.
`BELL`	script.js	`2.2`	Le oscillazioni al secondo della campana da sola.
`CLAPPER`	script.js	`1.3`	Le oscillazioni al secondo del batacchio da solo: più lento della campana, così resta indietro e colpisce.
`WAVES`	script.js	`3`	Quante onde di suono partono a ogni colpo.
`QUIET`	script.js	`2.4`	I secondi in cui la barra resta sulla campana dopo aver tolto l'iscrizione.

Provali nel Playground

Quando usarla

Per iscriversi a un canale, a una newsletter, alle notifiche di un prodotto o di un autore: ovunque la campanella voglia dire «ti avviso io». Il movimento è breve e si spegne da solo, quindi regge anche in una pagina affollata.

Sul telefono

Il pulsante è alto 60 pixel, grande abbastanza per il pollice, e a 390 pixel il numero gli sta ancora accanto; su uno schermo più stretto va sotto. Al tocco si stringe e la campana suona come col mouse; senza mouse non c'è la scritta Unsubscribe sotto il dito: un secondo tocco toglie l'iscrizione e mostra la barra.

Con il movimento ridotto

La campana non oscilla: iscrivendosi due archi fermi le si accendono ai lati e svaniscono, le parole cambiano senza scorrere e il numero cambia subito. Togliendo l'iscrizione la barra c'è già e la campana si attenua.

Trappole

Con il batacchio più veloce della campana non succedeva quasi niente: i due pendoli andavano insieme e i colpi erano due in tutto. Il batacchio deve essere più lento, così resta indietro a ogni inversione e colpisce.
Il batacchio, a riposo contro il bordo, «colpisce» centinaia di volte di fila con velocità quasi zero: solo gli urti sopra una soglia sono colpi veri, sennò le onde partivano a raffica.
Le equazioni del doppio pendolo diventano instabili con un passo grande: si avanza in passi di 1/600 di secondo dentro il fotogramma, e il fotogramma stesso è limitato a 1/30.
Le onde stanno in un SVG più grande del pulsante, centrato sulla campana: dentro il cerchio della campana erano tagliate. Il testo del pulsante sta sopra le onde (z-index), o gli archi gli passavano davanti.
La barra bianca sulla campana non si staccava dall'ottone: ha un bordo del colore del pulsante fatto con due drop-shadow, che cambia col colore del pulsante.
Il colore caldo di Unsubscribe va dato solo quando il pulsante lo offre davvero: con :hover compariva subito dopo il clic che iscriveva, mentre la scritta diceva ancora Subscribed.

Librerie

GSAP 3.15.0, Onest (font variabile) 5.3.0.

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

Collaudo

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