Il carrello a righe

Carrelli, Testo, TransizioniGSAP, Solo CSSImpegnativaPeso compresso: Demo 14 KBGSAP 28 KBGratisScarica lo zip

Il piccolo carrello di una cartoleria essenziale, nello stile minimal: quattro prodotti scritti come righe di testo, con la quantità, il prezzo e un segno per toglierli. Cambiando una quantità rotolano solo le cifre che cambiano, la più a destra per prima, e il totale si ricompone cifra per cifra; togliendo un prodotto un filetto vermiglio lo barra e la riga si richiude piegandosi come carta, mentre le altre salgono su molle; sotto ogni totale nuovo la riga della somma si ridisegna. Annulla la riapre.

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 basket in lines</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/full.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the small basket of a plain stationery shop, set as lines of type: every product is a line with its price,
         its quantity and a sign to take it away. A quantity that changes rolls its figures and the total recomposes
         itself digit by digit; a product taken away is struck through with a hairline and its line folds shut like
         paper, while the lines under it rise on springs; the rule of the sum is drawn again under every new total -->
    <section class="cart" aria-labelledby="cart-title" data-cart data-autoclic>
      <header class="cart__head">
        <h2 class="cart__title" id="cart-title">Basket</h2>
        <div class="cart__side">
          <button class="undo" type="button" hidden data-undo>
            <svg class="undo__icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M5.5 3.5 2.5 6.5l3 3"/><path d="M2.8 6.5h6.7a3.5 3.5 0 0 1 0 7H7"/></svg>
            <span class="undo__word">Undo</span>
            <span class="undo__time" aria-hidden="true" data-undo-time></span>
          </button>
          <p class="cart__count"><span class="roll" aria-hidden="true" data-count-n></span><span aria-hidden="true" data-count-word>items</span><span class="sr" data-count-sr></span></p>
        </div>
      </header>
      <span class="cart__rule" aria-hidden="true" data-head-rule></span>

      <div class="lines" data-lines>
        <ul class="lines__list" aria-label="Products" data-list></ul>
        <p class="lines__empty" aria-hidden="true" data-empty>Nothing in the basket yet.</p>
      </div>

      <div class="sum" data-sum>
        <div class="sum__rule" aria-hidden="true" data-sum-rule>
          <svg class="sum__plus" viewBox="0 0 10 10"><path d="M5 1.5v7M1.5 5h7"/></svg>
          <span class="sum__line" data-sum-line></span>
        </div>
        <p class="sum__total">
          <span class="sum__label">Total</span>
          <span class="sum__figure" aria-hidden="true" data-total-box><span class="sum__cur c" data-cur></span><span class="roll" data-total></span></span><span class="sr" data-total-sr></span>
        </p>
        <p class="sum__note">Delivery and taxes at the next step.</p>
      </div>

      <button class="go" type="button" data-go>
        <span class="go__fill" aria-hidden="true" data-go-fill></span>
        <span class="go__label" data-go-label>Checkout</span>
      </button>

      <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.

41 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 carrello a righe» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco, largo 440 pixel, il carrello: Basket in nero stretto, a destra 5 items, e sotto un filetto nero. Poi quattro righe separate da linee sottilissime: Dot grid notebook, Brass pencil, Fountain pen ink e Archive box, ognuna col suo formato in grigio sotto il nome, i segni meno e più con la quantità in mezzo, il prezzo e una piccola croce. In fondo un più minuscolo e la riga della somma, Total con €77.50 grande e stretto, una riga sulla consegna e la pillola nera Checkout. All'arrivo il filetto si disegna da sinistra, le righe salgono una dopo l'altra e le loro cifre entrano rotolando dal niente; poi il totale si ricompone e la sua riga si disegna da destra. Col più o col meno rotolano solo le cifre che cambiano, in su per un aumento e in giù per un calo, prima quella più a destra e poi le altre, come un riporto: mentre corrono si stringono sull'asse della larghezza, atterrano un pixel oltre il loro posto e tornano, e per un attimo prendono un poco di grado. Se il totale guadagna una cifra (da €98.00 a €107.50) si apre una casella nuova a sinistra, se la perde la casella si chiude. La riga della somma esce verso sinistra e si ridisegna da destra, larga quanto il totale nuovo. Con la croce, o col meno su una quantità di uno, un filetto vermiglio barra la riga da sinistra a destra e il testo diventa grigio; poi la riga si piega a metà come una striscia di carta, la metà di sotto un po' più scura, finché non è alta zero, e le righe sotto salgono ognuna sulla sua molla, le più lontane un attimo dopo. In alto compare Undo in vermiglio, con un filo sotto che si accorcia in cinque secondi: premuto, la riga si riapre spingendo giù le altre e il filetto torna indietro. La pillola, sotto il mouse, si gonfia un poco oltre i suoi bordi e la parola si allarga sull'asse della larghezza, con un piccolo rimbalzo; premuta si schiaccia.

Come funziona

Le cifre come finestre su una striscia

Ogni cifra di un numero è una casella larga quanto una cifra (Roboto Flex ha le cifre tabellari, tutte uguali: la larghezza si misura una volta con una sonda) e alta 1,3 em, con overflow hidden e una maschera che sfuma sopra e sotto. Dentro c'è una striscia: a riposo una cifra sola, quando cambia le cifre da quella vecchia a quella nuova, nel verso del cambio. GSAP muove la posizione della striscia con power3.out fino a un pixel oltre (il superamento è in pixel, non in parte della corsa, quindi è uguale per un passo o per sette) e poi la riporta al suo posto; alla fine la striscia torna a una cifra sola.

Il riporto, da destra

Il numero nuovo si confronta col vecchio partendo da destra, così le unità incontrano le unità e il punto dei decimali resta fermo. Per ogni posizione: se la cifra è la stessa non succede niente, se è diversa rotola, con un ritardo di CARRY secondi per ogni posto verso sinistra; una posizione in più apre la sua casella da larghezza zero e la cifra entra dal vuoto, una in meno rotola via e la casella si chiude. Un giro lungo (da 7 a 8 scendendo) mostra solo le ultime quattro cifre della strada: la striscia resta corta e il numero calmo.

Gli assi che lavorano: larghezza e grado

A ogni fotogramma la velocità della striscia (cifre al secondo) stringe le sue cifre sull'asse wdth fino a NARROW, come una sfocatura tipografica; all'atterraggio un breve tween porta l'asse GRAD a 80 e poi a zero. Il grado ingrossa il segno senza cambiare la larghezza, quindi le caselle non si muovono di un pixel mentre la cifra prende peso. Gli assi stanno in font-variation-settings della striscia, partendo dalla larghezza del suo numero (il totale è stretto, 78).

Il filetto e la piega di carta

Togliere un prodotto è una timeline: un elemento alto 1,5 pixel si allarga con scaleX da sinistra sulla riga del nome, poi la riga si piega. Si fanno due copie della riga, ognuna in una finestra alta metà: la metà di sopra gira sul suo bordo alto con rotateX(θ), quella di sotto è spostata di (h/2)·cos θ in basso e (h/2)·sin θ verso chi guarda e gira di −θ, così il suo bordo basso finisce esattamente a h·cos θ. La riga vera, nascosta, conta per l'impaginazione proprio h·cos θ; la metà girata via dalla luce si scurisce un poco col seno dell'angolo. Annulla rifà la piega al contrario e il filetto si ritira.

Le righe su molle, con il contatto

Le righe sono assolute e ognuna ha una molla (SPRING, con passi di al massimo 1/120 di secondo e mai più di 1/30 per fotogramma) che insegue la somma delle altezze sopra di lei; più una riga è lontana da quella che cambia, più la sua molla è morbida (RIPPLE), quindi salgono una dopo l'altra e si assestano con un pixel di troppo. Una riga non entra mai più di un pixel e mezzo in quella sopra: quando una riga si riapre spinge giù le altre invece di finirci sopra. Anche l'altezza dell'elenco, e quindi il totale e la pillola, va su una molla; quando niente si muove il ciclo si ferma.

La somma, la pillola, i tasti e l'anteprima

La riga della somma è larga quanto il totale nuovo, misurato su una copia nascosta: esce verso sinistra e si ridisegna da destra, e il più accanto rimbalza. La pillola Checkout ha due molle, il gonfiarsi (più morbida, rimbalza) e lo schiacciarsi: il fondo si scala di pochi pixel oltre i bordi e la parola va da wdth 100 a 124. Tutto è fatto di button veri; Canc toglie la riga col fuoco, Ctrl o Cmd con Z annulla, il fuoco passa a Undo e torna sulla riga riaperta, e una regione aria-live dice quantità e totale. Un clic da script sul carrello (detail 0, l'anteprima della libreria) fa un giro: due più, una riga tolta, Annulla, due meno e la pillola premuta.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`ITEMS`	script.js	`[['Dot grid notebook', 'A5 · 120 g paper', 18, 1], …]`	I prodotti: nome, la riga sotto il nome, il prezzo di uno e quanti.
`CURRENCY`	script.js	`€`	Il segno davanti ai prezzi.
`MAX_QTY`	script.js	`9`	Il massimo di un prodotto.
`ROLL`	script.js	`0.6`	I secondi che una cifra impiega a rotolare fino a quella nuova.
`CARRY`	script.js	`0.05`	Il ritardo fra una cifra e quella alla sua sinistra, come un riporto.
`NARROW`	script.js	`0.3`	Quanto si stringe una cifra sull'asse della larghezza mentre corre veloce (0, mai).
`STRIKE`	script.js	`0.45`	I secondi del filetto che barra un prodotto.
`FOLD`	script.js	`0.6`	I secondi della riga che si piega.
`SPRING`	script.js	`[300, 28]`	La molla delle righe che salgono: quanto è rigida e quanto è frenata.
`RIPPLE`	script.js	`0.35`	Quanto rispondono dopo le righe più in basso (0, tutte insieme).
`UNDO_TIME`	script.js	`5`	I secondi in cui resta Undo dopo che un prodotto se ne va.

Provali nel Playground

Quando usarla

Per il carrello laterale o la pagina del carrello di un negozio con pochi prodotti e tanta tipografia: una cartoleria, una libreria, un negozio di caffè o di oggetti per la casa, la cassa di un sito di biglietti; anche per qualunque elenco con quantità e un totale (un preventivo, un ordine al tavolo). Sta bene con tre-sei righe corte; i colori e le molle si cambiano nelle variabili.

Sul telefono

Sotto i 480 pixel le colonne si stringono (il carrello è largo quanto lo schermo meno 32, 358 a 390), il nome scende a 15 pixel e se non ci sta finisce coi puntini, il totale a 38. Tutto il resto è uguale: le cifre rotolano, le righe si piegano, le molle sono le stesse. I tocchi non aspettano il doppio tocco (touch-action manipulation) e sulla pillola il dito fa quello che fa il mouse: la gonfia e la schiaccia.

Con il movimento ridotto

Niente cifre che rotolano: cambiano al loro posto. Togliendo un prodotto il filetto compare in dissolvenza, la riga sfuma e le altre prendono subito il suo posto senza scivolare; Annulla la fa ricomparire in dissolvenza. La riga della somma cambia larghezza senza ridisegnarsi, la pillola non si gonfia, Undo compare in dissolvenza e all'apertura il carrello sfuma dentro.

Trappole

Il superamento di back.out è una parte della corsa: una cifra che faceva sette passi sforava di quattro pixel, una che ne faceva uno di mezzo. Ora la striscia va con power3.out fino a un pixel esatto oltre, contato sull'altezza vera della casella, e poi torna.
Con la regola del verso (in giù per un calo) una cifra da 7 a 8 faceva nove passi, e un totale che scendeva da 107.50 a 98.00 diventava un groviglio di cifre a metà. Ora un giro lungo mostra solo le ultime quattro cifre della strada.
Stringere le cifre con wdth le rendeva più strette e la casella, larga quanto il contenuto, si ritirava: tutto il numero tremava. La casella ha una larghezza fissa misurata una volta, e l'asse cambia solo sulla striscia dentro.
Riaprendo una riga, quelle sotto la seguivano su molle e per un attimo ci finivano sopra: ora una riga non può entrare più di un pixel e mezzo in quella sopra (prende la sua velocità), e la riga che si piega sta sopra le altre.
Il più accanto alla riga della somma girava di 90 gradi e a 45 era una croce, un segno di moltiplicazione: ora rimbalza sulla scala.
Togliendo una riga col fuoco dentro, il fuoco finiva sulla pagina: passa a Undo, e dopo Annulla torna sulla croce della riga riaperta.

Librerie

GSAP 3.15.0, Roboto Flex (font variabile, con gli assi della larghezza, del peso e del grado) 5.3.0.

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

Collaudo

Provata il 16 ottobre 2026

Computer: Fatto
Telefono: Fatto
Movimento ridotto: Fatto
Safari su iPhone: Da fare

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.