Flip Grid
A grid whose items glide to new places when filtered or sorted.
Flip Grid animates layout changes with GSAP Flip: filter, sort or reflow the grid and every item glides from where it was to where it lands. New items scale in and removed ones fade out. Changing one key is all it takes.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/flip-grid.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/flip-grid.
Builds on: motion
Usage
import { FlipGrid, FlipGridItem } from "@/components/ui/flip-grid";
<FlipGrid layoutKey={filter} className="grid-cols-4">
{items.map((i) => (
<FlipGridItem key={i.id} id={i.id} hidden={!matches(i)}>…</FlipGridItem>
))}
</FlipGrid>Motion
GSAP Flip records positions before the change and animates the difference.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
FlipGrid
| Prop | Type | Default | Description |
|---|---|---|---|
| layoutKey | string | number | — | Change it to animate the next layout. |
Accessibility
- Children keep their semantics and DOM order.
- With reduced motion or --cl-motion: 0 the effect stays still and the content remains fully usable.
FAQ
Also searched as: gsap flip react · animated filter grid · layout animation react · shuffle grid · isotope alternative