Il mazzo da scegliere

Card, Fisica, TransizioniGSAPImpegnativaPeso compresso: Demo 9,7 KBGSAP 28 KBGratisScarica lo zip

Un mazzo di idee per il fine settimana: la carta in cima segue la mano e gira attorno al punto in cui la si tiene, un timbro dice che cosa succede lasciandola; lanciata, vola via con la velocità che aveva, girando e cadendo un poco, mentre le carte sotto salgono, e Undo la riporta indietro da dove è uscita.

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 swipe deck</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the swipe deck: the top card follows the hand and turns around the point it is held by; thrown, it flies on
         with the speed it had, and the cards under it come up -->
    <section class="plans" aria-labelledby="plans-title" data-plans data-autoclic>
      <header class="plans__head">
        <h2 class="plans__title" id="plans-title">This weekend</h2>
        <p class="plans__count" data-count></p>
      </header>
      <div class="deck" data-deck>
        <div class="done" data-done hidden>
          <p class="done__over">You kept</p>
          <p class="done__count" data-kept>0</p>
          <ul class="done__list" data-list aria-label="Plans kept"></ul>
          <button class="done__again" type="button" data-again>Start over</button>
        </div>
      </div>
      <div class="actions">
        <button class="act act--skip" type="button" aria-label="Skip" data-skip>
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6.5 6.5l11 11M17.5 6.5l-11 11"/></svg>
        </button>
        <button class="act act--undo" type="button" aria-label="Undo" data-undo disabled>
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 7.5H14.5a5 5 0 0 1 0 10H8"/><path d="M11.5 4.5L8.5 7.5l3 3"/></svg>
        </button>
        <button class="act act--keep" type="button" aria-label="Keep" data-keep>
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5.5 12.5l4.2 4.2 8.8-9.4"/></svg>
        </button>
      </div>
      <p class="plans__hint" id="plans-hint">Drag right to keep, left to skip.</p>
      <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.

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

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco This weekend, 1 of 6 e un mazzo di sei carte colorate, ognuna con un disegno, un’etichetta, un nome grande e quando (Sunrise hike, Pottery class, Night market, Jazz in the park, Lake swim, Old town walk); sotto, un pulsante rosso per scartare, uno grigio per tornare indietro e uno verde per tenere. All’apertura le carte salgono dal basso una dopo l’altra, e ognuna atterra sul mazzo spingendo giù quelle sotto. Il disegno della carta in cima si muove piano: il sole sale, sul vaso passa un riflesso, il vapore sale dalla ciotola, il disco gira, le onde scorrono, gli archi si disegnano. Trascinata, la carta segue la mano inclinandosi (tenuta per la metà alta si piega dalla parte in cui va, per quella bassa dall’altra), compare il timbro Keep o Skip e il pulsante verde o rosso si riempie del suo colore, mentre la carta sotto cresce e sale. Lasciata oltre il segno, o con uno scatto veloce, vola via con la velocità che aveva, girando e cadendo un poco; lasciata prima, torna al centro su una molla. I pulsanti la lanciano con un piccolo slancio; Undo la riporta indietro da dove è uscita. Finite le carte compare You kept con il numero e i nomi tenuti nei loro colori, e Start over ridistribuisce il mazzo.

Come funziona

La carta in mano

Al pointerdown la carta in cima prende il puntatore (setPointerCapture) e segue la mano in x e y; la rotazione è x × TILT, col segno che dipende da dove la si tiene: sopra la metà gira nel verso del movimento, sotto nel verso opposto, come una carta vera. La velocità si misura sugli ultimi 70 millisecondi di movimento.

Lanciata o rimessa

Lasciata oltre THROW pixel, o più veloce di FLICK pixel al secondo nella stessa direzione, la carta vola: x e y avanzano con la velocità che aveva (almeno 1100 pixel al secondo di lato), una gravità la fa cadere un poco e continua a girare, finché esce dallo schermo. Altrimenti torna al centro su una molla (SPRING), calcolata sul ticker di GSAP a passi di 4 millisecondi.

Il mazzo sotto

Ogni carta sta un passo più giù per ogni carta sopra di lei: più piccola di DEPTH[0] e più bassa di DEPTH[1] pixel a ogni passo, portata lì da una sua molla; dalla quarta in giù sparisce. Mentre la carta in cima si allontana, quelle sotto salgono di quanto lei è lontana dal centro, fino a un passo intero.

Timbri, pulsanti e Undo

I timbri Keep e Skip compaiono e si stringono da 1,35 a 1 con lo spostamento di lato, e i pulsanti si riempiono del loro colore con color-mix. I pulsanti lanciano la carta con un piccolo slancio dalla loro parte; Undo la rimette in cima facendola tornare da dove era uscita, su una molla più frenata, e il mazzo si sposta per farle posto.

Tasti e anteprima

La carta in cima si raggiunge col Tab: la freccia a destra la tiene, quella a sinistra la scarta, e la focalizzazione passa alla carta dopo; le altre hanno aria-hidden. Una regione aria-live dice Kept, Skipped, is back. Un clic da script (l’anteprima della libreria) è una mano finta: trascina la carta su una curva e la lancia, ogni tanto ne riporta indietro una, e alla fine ridistribuisce il mazzo.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`THROW`	script.js	`110`	Di quanti pixel va trascinata una carta perché, lasciandola, voli via.
`FLICK`	script.js	`650`	Quanto deve andare veloce, in pixel al secondo, uno scatto più corto per lanciare la carta lo stesso.
`TILT`	script.js	`0.07`	Di quanti gradi gira una carta per ogni pixel di lato.
`SPRING`	script.js	`[260, 0.62]`	La molla che riporta una carta al centro: quanto è rigida e quanto è frenata.
`DEPTH`	script.js	`[0.05, 16]`	Quanto è più piccola, e quanti pixel più in basso, ogni carta scendendo nel mazzo.
`PLANS`	script.js	`[['Sunrise hike', 'Outdoors', 'Sat 6:10 am · 2 h', 'sun'], …]`	Le idee: nome, tipo, quando e il disegno (sun, vase, bowl, record, waves, arches).

Provali nel Playground

Quando usarla

Per scegliere fra tante proposte una alla volta: idee per il fine settimana, piatti di un menu, case da vedere, candidati, foto da tenere, le domande di un gioco.

Sul telefono

Le carte si trascinano col dito senza far scorrere la pagina (touch-action none sulle carte) e senza il menu del tocco lungo; il mazzo è alto al massimo il 62 per cento dello schermo, così i pulsanti restano a portata di pollice.

Con il movimento ridotto

La carta segue comunque la mano, ma lasciata va subito al centro o sparisce senza volare; il mazzo cambia senza molle, le carte non salgono dal basso all’inizio e i disegni restano fermi.

Trappole

Una costante chiamata top in cima a uno script classico si scontra con window.top e lo script non parte (SyntaxError): serve un altro nome.
gsap.quickSetter con scale non scrive niente: per la scala servono due quickSetter, scaleX e scaleY.
Una carta invisibile (opacity 0) prende ancora i clic: le carte che non sono in cima, e quelle che volano via, hanno pointer-events none, altrimenti coprono i pulsanti.
La velocità di uno scatto va misurata sugli ultimi istanti: una media su troppo tempo la sottostima, perché la mano accelera alla fine.

Librerie

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

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