Il menu che si apre dal pulsante
Menu, Transizioni, Testo
Gratis
Tutti i componenti
Il carrello col traguardo
Il carrello di una bottega con un traguardo, la consegna gratis da una certa cifra: una barra si riempie verso il traguardo con un piccolo rimbalzo e, quando ci arriva, diventa oro e un furgoncino la percorre fino in fondo; le quantità fanno rotolare le cifre, i prezzi contano, una riga trascinata a sinistra se ne va e il prodotto suggerito vola nel carrello.
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 basket with a goal</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/nunito-sans@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the basket with a goal: a bar fills towards free delivery and a small van sets off when it gets there; the
quantities roll, the totals count, a row dragged aside goes away and a suggestion flies in -->
<section class="basket" aria-labelledby="basket-title" data-basket data-autoclic>
<header class="basket__head">
<h2 class="basket__title" id="basket-title">Your basket</h2>
<p class="basket__count" data-count></p>
</header>
<div class="goal" data-goal>
<p class="goal__text" aria-live="polite" data-goal-text></p>
<div class="goal__track" aria-hidden="true">
<span class="goal__fill" data-fill></span>
<svg class="goal__van" viewBox="0 0 40 26" data-van><path d="M3 5.5h20v13H3z"/><path d="M23 9.5h7.5l5 5v4H23z"/><circle cx="10" cy="20.5" r="3.2"/><circle cx="29" cy="20.5" r="3.2"/></svg>
</div>
</div>
<ul class="items" aria-label="Products" data-items></ul>
<div class="extra" data-extra>
<p class="extra__label">Goes well with</p>
<button class="extra__add" type="button" data-add></button>
</div>
<footer class="basket__foot">
<p class="basket__total"><span>Subtotal</span><strong data-total></strong></p>
<button class="basket__go" type="button" data-go>Checkout</button>
</footer>
<p class="sr" aria-live="polite" data-live></p>
</section>
</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.
36 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 carrello col traguardo» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero un carrello scuro: Your basket col numero dei pezzi, la frase €13 away from free delivery sopra una barra verde con un furgoncino in punta, tre righe (Chestnut honey, Olive oil, Fusilli), ognuna col suo disegnino, il prezzo e i bottoni meno e più, poi Goes well with con Fig jam +€6, il Subtotal e Checkout. Col più o col meno la cifra della quantità esce dalla parte del cambio e la nuova entra dall’altra, il prezzo della riga e il subtotale contano fino alla cifra nuova e la barra si allunga o si accorcia con un piccolo rimbalzo. Arrivati a €45 la barra diventa oro, la frase dice Delivery is free con free che salta fuori e il furgoncino corre fino in fondo dondolando sulle sospensioni; tornando sotto, il furgoncino torna indietro con la barra. Una riga trascinata a sinistra scopre sotto di sé il rosso con Remove: lasciata oltre il segno scivola via e lo spazio si chiude, altrimenti torna a posto; anche il meno su una quantità di uno la toglie. Fig jam vola con un arco dal suggerimento alla riga nuova, che intanto si apre, e togliendola il suggerimento torna.
Come funziona
Le cifre che rotolano
La quantità cambia con una piccola timeline: la cifra vecchia esce verso l’alto o verso il basso, a seconda del verso del cambio (yPercent), in 0,12 secondi, e la nuova entra dall’altra parte con back.out. Il prezzo della riga e il subtotale contano con un tween su un oggetto qualunque, arrotondati ai 50 centesimi mentre contano.
La barra e il traguardo
La barra è un elemento scalato in larghezza (scaleX) fino alla parte di traguardo raggiunta, in FILL secondi con elastic.out: può passare il segno di poco, fino al 102%, e tornare. Il subtotale invece conta con power3.out, senza mai passare la cifra vera. Raggiunto FREE, una classe colora d’oro la barra e la cifra.
Il furgoncino
Il furgoncino sta sulla punta della barra; quando il traguardo è raggiunto una timeline lo porta fino in fondo in FILL secondi, facendolo dondolare con dei keyframes su y e sulla rotazione, e fa saltare fuori la parola free con back.out. Sotto il traguardo torna a seguire la punta.
Trascinare via una riga
La riga ascolta i pointer event: quando il puntatore si è mosso di 6 pixel di lato decide se il gesto è orizzontale (allora prende la cattura del puntatore e la riga segue il dito, solo verso sinistra) o verticale (allora lo lascia alla pagina, che scorre: touch-action pan-y). Lasciata oltre SWIPE della sua larghezza esce a sinistra e la sua altezza va a zero; altrimenti torna con back.out.
Il suggerimento, i tasti e l’anteprima
Il disegnino del suggerimento è copiato in un elemento che vola fino alla riga nuova, la cui posizione viene riletta a ogni fotogramma perché intanto si apre: in orizzontale con power2.inOut, in verticale con back.in, così fa un arco; arrivato, il disegnino vero rimbalza. Le righe si raggiungono col Tab e Canc le toglie, passando il fuoco alla prima riga rimasta; un clic da script (l’anteprima della libreria) è un cliente finto: un olio in più, la marmellata, la marmellata trascinata via, un olio in meno.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
FREE | script.js | 45 | La cifra da cui la consegna è gratis, in euro. |
ITEMS | script.js | [['Chestnut honey', 'Jar · 250 g', 9, 1, 'honey'], …] | I prodotti nel carrello: nome, formato, prezzo, quanti e disegno (honey, oil, pasta o jam). |
EXTRA | script.js | ['Fig jam', 'Jar · 220 g', 6, 1, 'jam'] | Il prodotto suggerito, scritto allo stesso modo. |
SWIPE | script.js | 0.4 | Quanto va trascinata una riga perché se ne vada, in parte della sua larghezza. |
FILL | script.js | 0.9 | I secondi che la barra impiega ad arrivare alla lunghezza nuova, e il furgoncino a correre fino in fondo. |
Quando usarla
Per il carrello di un negozio online o di una bottega, un ordine al ristorante, una raccolta fondi con un obiettivo, qualunque elenco con un totale e una soglia da raggiungere (spedizione gratis, uno sconto, un regalo).
Sul telefono
Le righe si trascinano col dito verso sinistra; in verticale la pagina scorre come sempre (touch-action pan-y), perché il gesto viene preso solo quando è chiaramente di lato; i tocchi sui bottoni non aspettano il doppio tocco (touch-action manipulation).
Con il movimento ridotto
Le cifre cambiano senza rotolare, i prezzi e il subtotale vanno subito alla cifra nuova, la barra cambia lunghezza di colpo e il furgoncino non corre (sta sulla punta della barra), le righe spariscono subito e il suggerimento entra senza volare; niente entrata.
Trappole
- Un subtotale che conta con un ease elastico passa la cifra vera e per un attimo mostra un prezzo sbagliato: i soldi contano con un ease che non sfora, solo la barra rimbalza.
- Una riga tolta mentre ha il fuoco lo porta via con sé e il fuoco finisce sulla pagina: va spostato prima di toglierla, anche col movimento ridotto.
- Con touch-action none la pagina non scorre più sopra le righe; con pan-y scorre in verticale e il trascinamento di lato resta allo script, che prende la cattura del puntatore solo quando il gesto è chiaramente di lato.
- Il disegnino che vola deve inseguire la riga nuova, che si sta aprendo e si sposta: la sua posizione va riletta a ogni fotogramma, non solo all’inizio.
- Un fondo rosso lasciato sotto una riga ferma, con gli stessi angoli arrotondati, filtra dai bordi come un filo rosso (in Safari si vede bene): il rosso si accende solo mentre la riga viene trascinata o se ne va.
Librerie
GSAP 3.15.0, Nunito Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,6 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 3 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.
