Lista o griglia

Liste, TransizioniGSAPMediaPeso compresso: Demo 4,8 KBGSAP + Flip 37 KBGratisScarica lo zip

La carta dei vini di una cantina, da vedere in lista o in griglia: cambiando vista ogni scheda cambia forma, ogni bottiglia vola libera al suo posto nuovo crescendo o rimpicciolendo, e le scritte ricompaiono al loro posto; una bottiglia sotto il puntatore si inclina come per versare.

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 list or grid</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/commissioner@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the list or grid: switching the view, every card, bottle and word flies from its place in one layout to its
         place in the other -->
    <section class="cellar" aria-labelledby="cellar-title" data-cellar data-autoclic>
      <header class="cellar__head">
        <div>
          <h2 class="cellar__title" id="cellar-title">Our wines</h2>
          <p class="cellar__meta">Six bottles from the hill</p>
        </div>
        <div class="views" role="radiogroup" aria-label="View" data-views>
          <span class="views__pill" aria-hidden="true" data-pill></span>
          <button class="views__btn" type="button" role="radio" aria-checked="true" aria-label="List" data-view="list">
            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6.5h10.5M9 12h10.5M9 17.5h10.5M4.5 6.5h1.5M4.5 12h1.5M4.5 17.5h1.5"/></svg>
          </button>
          <button class="views__btn" type="button" role="radio" aria-checked="false" aria-label="Grid" tabindex="-1" data-view="grid">
            <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="4.5" y="4.5" width="6" height="6" rx="1.5"/><rect x="13.5" y="4.5" width="6" height="6" rx="1.5"/><rect x="4.5" y="13.5" width="6" height="6" rx="1.5"/><rect x="13.5" y="13.5" width="6" height="6" rx="1.5"/></svg>
          </button>
        </div>
      </header>
      <ul class="wines" data-wines></ul>
      <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="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/Flip.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.

35 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 «Lista o griglia» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero Our wines, Six bottles from the hill e un interruttore con due icone, elenco e griglia, con una pastiglia dorata sotto quella scelta; sotto, sei vini, ognuno con la sua bottiglia disegnata nel colore del vetro, il nome, il tipo con l’anno e il prezzo (Rio Freddo, Pietra Bianca, Colle Alto, Brina, Sera d’Estate, Vigna Vecchia). Scegliendo la griglia, la pastiglia scivola con un rimbalzo, le schede si allargano e si spostano nelle due colonne una dopo l’altra, le bottiglie volano ognuna al suo posto nuovo crescendo, e quando le schede sono quasi arrivate le scritte ricompaiono salendo, coi prezzi sotto il nome; tornando alla lista succede il contrario, dall’ultima scheda alla prima. Fermando il puntatore su una scheda la sua bottiglia si inclina in avanti come per versare e torna dritta con un’oscillazione.

Come funziona

Fotografare e cambiare

Prima del cambio GSAP Flip fotografa dove sono e quanto sono grandi le schede e le bottiglie (Flip.getState); poi la lista cambia classe (is-grid) e il layout diventa l’altro, di colpo; Flip.from porta ogni pezzo dalla fotografia al suo posto nuovo.

Le schede

Le schede passano dalla forma vecchia alla nuova in DURATION secondi con power3.inOut, una dopo l’altra a STAGGER secondi: dalla prima andando in griglia, dall’ultima tornando alla lista.

Le bottiglie libere

Le bottiglie volano con absolute: per il viaggio escono dal flusso, così le schede che cambiano misura sotto di loro non le spingono; crescono o rimpiccioliscono da una misura all’altra e atterrano al loro posto.

Le scritte

Le scritte, che dentro una scheda che cambia misura andrebbero a capo e si schiaccerebbero, si fanno da parte subito e ricompaiono al loro posto nuovo a due terzi del viaggio, salendo di 8 pixel una dopo l’altra.

Tasti e anteprima

L’interruttore è un gruppo di due scelte (role radiogroup) con un solo arresto per il Tab e le frecce per passare dall’una all’altra; una regione aria-live dice come si vedono i vini. Una bottiglia si inclina di TIP gradi con back.out e torna con elastic.out. Un clic da script (l’anteprima della libreria) cambia vista e ogni tanto inclina una bottiglia come farebbe un puntatore fermo.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`DURATION`	script.js	`0.75`	I secondi in cui le schede volano ai loro posti nell’altra vista.
`STAGGER`	script.js	`0.035`	I secondi fra la partenza di una scheda e della successiva.
`TIP`	script.js	`14`	Di quanti gradi si inclina una bottiglia sotto il puntatore.
`WINES`	script.js	`[['Rio Freddo', 'Lambrusco · 2024', 14, '#5b1626'], …]`	I vini: nome, tipo e anno, prezzo in euro, colore del vetro.

Provali nel Playground

Quando usarla

Per una carta dei vini, il catalogo di un negozio, le camere di un agriturismo, i progetti di un portfolio, i risultati di una ricerca: ovunque si può scegliere fra l’elenco fitto e la griglia con le immagini grandi.

Sul telefono

La griglia resta a due colonne anche al telefono; il blocco parte dall’alto e non dal centro, così cambiando vista la testata non salta; al tocco le bottiglie non si inclinano.

Con il movimento ridotto

La vista cambia di colpo, senza voli, la pastiglia salta all’altra icona e le bottiglie non si inclinano.

Trappole

Con Flip annidato, i figli di schede che cambiano misura si riadattano durante il viaggio e sbandano: qui le bottiglie volano con absolute e le scritte si fanno da parte.
Flip.from si può chiamare più volte sulla stessa fotografia con targets diversi: le schede con un comportamento, le bottiglie con un altro.
Una pagina centrata in verticale fa saltare la testata quando il blocco cambia altezza: qui il blocco parte dall’alto.
Una bottiglia disegnata in SVG gira attorno al suo fondo solo con il transformOrigin dato a GSAP (50% 100%), non col CSS.

Librerie

GSAP 3.15.0, Flip (GSAP) 3.15.0, Commissioner (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 4,8 KB; le librerie: GSAP + Flip 37 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.