Il pulsante della chiamata

Pulsanti, Transizioni, SVGGSAPMediaPeso compresso: Demo 6,4 KBGSAP 28 KBGratisScarica lo zip

Una telefonata intera in un pulsante: cliccato, la cornetta oscilla e squilla e la pillola si gonfia a ogni squillo; quando Nora risponde la pillola si apre nella barra scura della chiamata, con l'avatar, il tempo che corre e il livello della voce, e la cornetta attraversa la barra fino a diventare il tasto rosso che chiude. Chiusa la chiamata, la barra torna una pillola grigia che dice quanto è durata.

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 call button</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/funnel-sans@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the call button: clicked, the handset rings; when Nora answers, the button opens into the call bar and the
         handset travels to the red key that ends the call -->
    <div class="call" data-call data-autoclic>
      <div class="call__shell" data-shell>
        <button class="call__start" type="button" data-start>
          <span class="call__label"><span class="call__word" data-word>Call Nora</span></span>
        </button>
        <span class="call__avatar" aria-hidden="true" data-avatar>NL</span>
        <span class="call__who" data-who>
          <span class="call__name">Nora Lind</span>
          <span class="call__line"><span class="call__time" data-time>0:00</span><span class="call__level"><span class="call__bars" aria-hidden="true" data-bars><i></i><i></i><i></i><i></i></span><span class="call__muted" aria-hidden="true" data-muted>Muted</span></span></span>
        </span>
        <button class="call__mute" type="button" aria-pressed="false" aria-label="Mute" data-mute>
          <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21"/><path class="call__slash" d="M4 4l16 16" pathLength="1" data-slash/></svg>
        </button>
        <span class="call__phone" aria-hidden="true" data-phone>
          <span class="call__ripple" data-ripple></span>
          <svg viewBox="0 0 24 24"><path d="M6.6 3.5l2.2 2.9c.5.7.4 1.6-.2 2.2L7.3 9.9a12.2 12.2 0 0 0 6.8 6.8l1.3-1.3c.6-.6 1.5-.7 2.2-.2l2.9 2.2c.8.6.9 1.7.2 2.4l-1.3 1.3c-1 1-2.6 1.4-4 .9A18.3 18.3 0 0 1 2.7 9.3c-.5-1.4-.1-3 .9-4L4.9 4c.5-.6 1.2-.8 1.7-.5z"/></svg>
        </span>
        <button class="call__end" type="button" aria-label="End the call" data-end></button>
      </div>
      <p class="call__hint"><span data-hint>Nora is on her mobile</span></p>
      <p class="sr" aria-live="polite" data-say></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

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

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco una pillola verde con una cornetta in un cerchio bianco e la scritta Call Nora, e sotto la riga Nora is on her mobile. Cliccando, la scritta diventa Calling Nora e la pillola si allarga quanto serve; la cornetta oscilla a scatti, un anello bianco se ne allontana e la pillola si gonfia appena a ogni squillo, con una pausa fra uno squillo e l'altro. Quando Nora risponde, la scritta se ne va e la pillola si apre nella barra scura della chiamata: arriva con un rimbalzo l'avatar con NL, entrano Nora Lind e il tempo che corre da 0:00, con quattro barre verdi che si muovono come una voce, e un tasto col microfono; intanto la cornetta attraversa la barra girando e diventando rossa, e diventa il tasto che chiude. Col microfono spento, sul microfono si disegna una barra e al posto delle barre verdi compare la parola Muted. Chiudendo, la barra si stringe in una pillola grigia che dice Call ended after e la durata, la cornetta torna a sinistra, grigia e dritta, e poco dopo il pulsante torna verde con Call Nora. Cliccando mentre squilla si ferma e dice Call cancelled.

Come funziona

Una pillola che prende la misura delle parole

La larghezza della pillola si misura con una copia invisibile della scritta, più lo spazio della cornetta a sinistra e un margine: a ogni cambio di parole la scritta rotola su e la pillola si allarga o si stringe con power3.out.

Lo squillo

Lo squillo è una timeline che si ripete: la cornetta ondeggia fra −SHAKE e SHAKE gradi in mezzo secondo (keyframes), un anello parte dal cerchio e si allarga fino a 1,8 volte svanendo, la pillola passa per 1,03 di scala; poi 0,32 secondi di silenzio. Dopo RING secondi Nora risponde.

La pillola diventa la barra

Quando Nora risponde GSAP porta la pillola a WIDE pixel (o lo schermo meno 48) e a 72 di altezza, dal verde al colore della barra, con expo.out; nello stesso tempo e con la stessa curva la cornetta va dal suo posto a quello del tasto rosso (spostamento, scala da 44 a 48 pixel, rotazione di 135 gradi e colore), così ci arriva insieme al bordo della barra. Avatar, nome e microfono entrano dopo, uno dietro l'altro.

Il tempo e la voce

Sul ticker di GSAP il tempo si conta dal momento della risposta e si riscrive solo quando cambia il secondo; le quattro barre hanno altezze fatte di seni a frequenze diverse, mai sotto i 6 pixel, così restano barre e non diventano puntini. Il microfono spento le abbassa e le spegne, e scrive Muted.

Tasti, fuoco e anteprima

Il tasto rosso è un pulsante trasparente sopra la cornetta arrivata lì; con la tastiera, quando Nora risponde il fuoco va su di lui, e a chiamata chiusa torna sul pulsante verde. Escape chiude la chiamata o smette di chiamare. Un clic da script (l'anteprima della libreria) fa la chiamata, e il clic dopo la chiude.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`RING`	script.js	`1.4`	I secondi in cui squilla prima che Nora risponda.
`WIDE`	script.js	`320`	Quanto si allarga la barra della chiamata, in pixel.
`SHAKE`	script.js	`14`	Di quanti gradi oscilla la cornetta mentre squilla.
`BACK`	script.js	`1.6`	I secondi in cui il pulsante dice quanto è durata la chiamata, prima di tornare pronto.

Provali nel Playground

Quando usarla

Per il sito di un ristorante, di un hotel o di uno studio che si chiama dal telefono, per un servizio clienti, per un'app che mette in contatto le persone: ovunque una chiamata deve sembrare viva già dal pulsante.

Sul telefono

La barra si apre al massimo larga quanto lo schermo meno 48 pixel; il tasto rosso e il microfono misurano 48 e 44 pixel, comodi per il dito, e al tocco la pillola si stringe appena.

Con il movimento ridotto

La chiamata fa gli stessi passi senza movimento: durante lo squillo niente oscillazione, anello e respiro (lo dice la scritta Calling Nora), la barra e la cornetta sono subito al loro posto, le barre della voce stanno ferme ad altezze diverse e le parole cambiano senza rotolare.

Trappole

Un anello lasciato a metà da una timeline interrotta resta dov'è: quando Nora risponde va spento a mano, o resta attorno al tasto rosso.
Barre della voce troppo basse sembrano quadratini: mai sotto i 6 pixel, e col microfono spento si tolgono e compare la parola Muted.
Nascondere il pulsante verde quando ha il fuoco fa perdere il fuoco alla pagina: con la tastiera il fuoco va portato sul tasto rosso, e a chiamata chiusa riportato indietro.
La larghezza giusta della pillola dipende dal carattere: va rimisurata quando il carattere è caricato (document.fonts.ready), o resta quella del carattere di riserva.
Il tasto rosso disegnato e quello da premere sono due cose diverse: la cornetta che viaggia è solo disegno (pointer-events none), il pulsante trasparente sopra di lei è quello vero, con l'etichetta End the call.

Librerie

GSAP 3.15.0, Funnel Sans (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 6,4 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.