Il pulsante del carrello

Pulsanti, TransizioniGSAPMediaPeso compresso: Demo 5,0 KBGSAP 28 KBGratisScarica lo zip

Add to cart: premuto, la borsa fa un saltello e vola via con le parole, e la pillola si stringe in un contatore con meno, numero e più, mentre un +1 sale fuori; a uno il meno è un cestino, che riapre il contatore nel pulsante.

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 add to cart button</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/outfit@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the button: pressed, the bag hops and the pill closes up into a counter (minus, number, plus) with a +1
         rising out of it. At one the minus is a bin, and the bin turns the counter back into the button -->
    <div class="cart" data-cart>
      <div class="cart__pill" data-pill>
        <button class="cart__add" type="button" data-add data-autoclic>
          <svg class="cart__bag" viewBox="0 0 24 24" aria-hidden="true" data-bag><path d="M5.5 8.5h13l-1 11.5h-11zM9 8.5V7a3 3 0 0 1 6 0v1.5"/></svg>
          <span data-add-label>Add to cart</span>
        </button>
        <div class="cart__stepper" role="group" aria-label="Quantity" data-stepper>
          <button class="cart__minus" type="button" data-minus>
            <svg viewBox="0 0 24 24" aria-hidden="true"><path class="cart__dash" data-dash d="M6.5 12h11"/><path class="cart__bin" data-bin d="M6 8h12M10 8V6.5h4V8M7.5 8l.8 10.5h7.4L16.5 8M10.5 11.5v4M13.5 11.5v4"/></svg>
          </button>
          <span class="cart__count" data-count></span>
          <button class="cart__plus" type="button" aria-label="Add one more" data-plus>
            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 6v12M6 12h12"/></svg>
          </button>
        </div>
      </div>
      <span class="cart__pop" aria-hidden="true" data-pop>+1</span>
      <p class="sr" role="status" aria-live="polite" data-said></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.

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

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero una pillola chiara con una borsa e la scritta Add to cart. Premuta, la borsa fa un saltello e vola via in alto insieme alla scritta, la pillola si stringe con un piccolo rimbalzo e si schiaccia un attimo come una gelatina, e dentro compaiono uno dopo l’altro un cestino rosso su un tondo chiaro, un più bianco su un tondo nero e in mezzo il numero 1, tutti con uno scatto che va oltre e torna; sopra la pillola sale un +1 che svanisce. Il più aggiunge uno (il numero rotola in su e sale un altro +1), fino a 9, dove invece trema; il meno toglie uno e il numero rotola in giù. A due il cestino diventa un meno girando, e a uno torna cestino. Il cestino riapre il contatore nel pulsante: i tre pezzi si rimpiccioliscono, la pillola si allarga e la borsa e la scritta tornano dall’alto. All’apertura la pillola sale e la borsa fa un saltello.

Come funziona

Due cose nella stessa pillola

Dentro la pillola ci sono il pulsante e il contatore, uno sopra l’altro, larghi quanto il loro contenuto; la pillola taglia quello che sporge e ha la larghezza di quello che si vede. Le due larghezze si misurano dal contenuto, e di nuovo quando arriva il carattere (con un ResizeObserver), così non si scrivono a mano.

Il passaggio

GSAP porta la larghezza della pillola da quella del pulsante a quella del contatore in MORPH secondi con back.out, mentre scaleY fa 0,9, 1,04 e 1. La borsa sale e ruota, poi vola via con la scritta; il meno, il più e il numero entrano con scale da 0,3 e back.out(SPRING), a qualche centesimo di secondo l’uno dall’altro. Il ritorno è lo stesso al contrario.

Il numero e il +1

Il numero rotola come in un contatore: la cifra nuova entra sotto la vecchia e salgono insieme in ROLL secondi (scendono togliendo). Il +1 è una scritta sopra la pillola che sale di 46 pixel e svanisce.

Il meno e il cestino

Sono due tracciati nello stesso pulsante: passando dall’uno all’altro, quello che se ne va gira di 90 gradi rimpicciolendo e quello che arriva entra girando dall’altra parte con back.out. Cambia anche il nome per gli screen reader: Remove one, o Remove from cart.

Tastiera

Il contatore è un gruppo con il suo nome (Quantity) e una riga di stato dice ogni numero. Con la tastiera il focus segue: dal pulsante al più quando il contatore compare, e dal cestino al pulsante quando torna. Col dito no, perché Safari su iPhone ci disegnerebbe il bordo del focus.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`MAX`	script.js	`9`	Il massimo che si può mettere nel carrello.
`MORPH`	script.js	`0.55`	I secondi della pillola che si stringe nel contatore, e che si riapre.
`ROLL`	script.js	`0.4`	I secondi in cui rotola una cifra del numero.
`SPRING`	script.js	`2`	Quanto vanno oltre il meno, il numero e il più mentre compaiono.

Provali nel Playground

Quando usarla

Per la scheda di un prodotto in un negozio online, un menu da ordinare, una lista della spesa: ovunque si aggiunge qualcosa e poi se ne sceglie la quantità senza spostarsi.

Sul telefono

La pillola resta della sua misura, che sta su qualunque schermo. I pulsanti del contatore sono di 44 pixel, la misura giusta per un dito, e rispondono subito anche toccati in fretta.

Con il movimento ridotto

Il pulsante e il contatore si scambiano di colpo, senza saltelli né rimbalzi; il numero cambia di colpo, niente +1, niente tremito al massimo, e il meno diventa cestino senza girare.

Trappole

Il pulsante e il contatore stanno uno sopra l’altro con visibility: hidden su quello che non si vede: con display: none non si potrebbero misurare, e senza nasconderli il tasto Tab passerebbe anche su quello invisibile.
La pillola va centrata dal suo contenitore (qui una griglia), così stringendosi resta in mezzo: allargandosi da un lato solo, il suo centro si sposterebbe.
Un tocco veloce sul più non deve aspettare: i pulsanti hanno touch-action: manipulation, o su iPhone ogni tocco aspetterebbe un possibile doppio tocco.
Il +1 si centra con la proprietà translate e si muove con GSAP: il transform in linea di GSAP cancellerebbe un translate(-50%) scritto dentro transform nel CSS.

Librerie

GSAP 3.15.0, Outfit (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 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.