List or grid

Lists, TransitionsGSAPMediumCompressed weight: Demo 4.8 KBGSAP + Flip 37 KBFreeDownload the zip

A winery’s wine list, seen as a list or as a grid: switching view every card changes shape, every bottle flies free to its new place growing or shrinking, and the words come back in their places; a bottle under the pointer tips as if to pour.

The code

A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.

Download the 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

Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.

35 values to change

Open the Playground

Or ask Claude Code for it

With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:

Take “List or grid” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On a black background Our wines, Six bottles from the hill and a switch with two icons, list and grid, with a gold pill under the one chosen; under them, six wines, each with its bottle drawn in the colour of its glass, the name, the kind with the year and the price (Rio Freddo, Pietra Bianca, Colle Alto, Brina, Sera d’Estate, Vigna Vecchia). Choosing the grid, the pill slides with a bounce, the cards widen and move into the two columns one after another, the bottles fly each to its new place, growing, and when the cards are nearly there the words come back rising, with the prices under the names; going back to the list the opposite happens, from the last card to the first. Resting the pointer on a card its bottle tips forward as if to pour and comes back upright with a sway.

How it works

Snapshot and change

Before the change GSAP’s Flip takes a snapshot of where the cards and bottles are and how big they are (Flip.getState); then the list changes class (is-grid) and the layout becomes the other one, at once; Flip.from takes every piece from the snapshot to its new place.

The cards

The cards go from the old shape to the new one in DURATION seconds with power3.inOut, one after another by STAGGER seconds: from the first going to the grid, from the last going back to the list.

The free bottles

The bottles fly with absolute: for the trip they leave the flow, so the cards changing size under them do not push them about; they grow or shrink from one size to the other and land in their place.

The words

The words, which inside a card changing size would wrap and squeeze, step aside at once and come back in their new places two thirds of the way through, rising by 8 pixels one after another.

Keys and the preview

The switch is a group of two choices (role radiogroup) with a single Tab stop and the arrows to go from one to the other; an aria-live region says how the wines are shown. A bottle tips by TIP degrees with back.out and comes back with elastic.out. A click from a script (the library’s preview) switches the view and now and then tips a bottle as a resting pointer would.

Values to change

Name	File	Default	What it changes
`DURATION`	script.js	`0.75`	The seconds the cards take to fly to their places in the other view.
`STAGGER`	script.js	`0.035`	The seconds between one card setting off and the next.
`TIP`	script.js	`14`	How many degrees a bottle tips when the pointer rests on its card.
`WINES`	script.js	`[['Rio Freddo', 'Lambrusco · 2024', 14, '#5b1626'], …]`	The wines: name, kind and year, price in euros, colour of the glass.

Try them in the Playground

When to use it

For a wine list, a shop’s catalogue, the rooms of a farm stay, a portfolio’s projects, search results: anywhere one can choose between a dense list and a grid with big pictures.

On phones

The grid keeps two columns on a phone too; the block starts from the top and not from the middle, so the heading does not jump when the view changes; on a tap the bottles do not tip.

With reduced motion

The view changes at once, without flights, the pill jumps to the other icon and the bottles do not tip.

Pitfalls

With nested Flip, the children of cards that change size reflow during the trip and drift: here the bottles fly with absolute and the words step aside.
Flip.from can be called more than once on the same snapshot with different targets: the cards with one behaviour, the bottles with another.
A page centred vertically makes the heading jump when the block changes height: here the block starts from the top.
A bottle drawn in SVG turns round its bottom only with the transformOrigin given to GSAP (50% 100%), not with the CSS.

Libraries

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

Compressed with gzip, the three demo files weigh 4.8 KB; the libraries: GSAP + Flip 37 KB.

Testing

Tested on 3 October 2026

Desktop: Done
Phone: Done
Reduced motion: Done
Safari on iPhone: Done

License

Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.