Flip Grid Shuffle — Free GSAP Flip Plugin Snippet

Reordering DOM elements normally teleports them — items snap to their new positions with no continuity, and users lose track of what went where. GSAP's Flip plugin fixes that with the FLIP technique (First, Last, Invert, Play): this snippet shuffles a grid, sorts it alphabetically, and toggles between grid and list layouts, with every item gliding to its new home. The plugin is free on the GSAP CDN since version 3.13.

The three-line FLIP pattern

Every operation runs through one helper: Flip.getState('.fgs-item') records each item's current position and size (First), the callback mutates the DOM instantly — reordering children or toggling a class (Last) — and Flip.from(state, {...}) measures the new layout, transforms every item back to where it *was*, then animates those transforms to zero (Invert, Play). The genius of FLIP is that the browser does the layout math: you never compute a coordinate, you just describe the end state in normal DOM/CSS terms.

Why absolute: true matters during reorders

While items animate between layout slots, they must overlap and cross each other freely. absolute: true temporarily pulls each animating item out of the document flow (position: absolute with its captured coordinates), so mid-flight items don't push their siblings around and CSS grid can't re-wrap the ones still moving. When the animation completes, Flip restores the real layout properties — the DOM ends exactly as if you'd mutated it with no animation at all.

The shuffle is a real Fisher–Yates on live nodes

The shuffle button runs a Fisher–Yates pass directly on grid.children, using insertBefore swaps so the actual DOM order changes — not just visual positions. That's deliberate: because the DOM is the source of truth, the sort button can then read textContent and localeCompare its way to alphabetical order, and any server-rendered or framework-driven re-render will agree with what's on screen.

Grid-to-list is just a class toggle

The layout switch adds .is-list, which changes grid-template-columns to one column, drops the aspect ratio, and reveals each item's label. Flip doesn't care *why* geometry changed — a class flip, a reorder, a container resize mid-capture all animate identically. That's what makes the plugin composable: one withFlip() wrapper serves all three buttons.

Stagger turns simultaneous motion into choreography

stagger: 0.03 offsets each item's start by 30ms in DOM order, so reorders ripple across the grid instead of moving as one rigid mass. With power2.inOut easing, items accelerate out of their old slots and settle into new ones — reading as deliberate rearrangement rather than physics chaos.

What Flip tracks (and what it doesn't)

By default Flip animates position and size. It can also track and animate specific properties via props: 'backgroundColor,borderRadius' in getState if your class toggle changes them — useful when list items restyle. Anything not tracked simply snaps, which is often correct for things like display on the labels here.

Customizing it

Add filtering (set display: none inside the mutation and pass onEnter/onLeave handlers for fade-ins), animate a real product grid, or drive the mutation from data. Related: shared-element expansion in flip card modal, filterable layouts in portfolio filter grid, entrance choreography in scroll reveal grid, and drag-based ordering in drag sort list.