motion-gallery
CSS grid gallery with spring hover lift and FLIP-based lightbox expand. Click any item — it springs to full screen and back. Navigate with arrows or keyboard.
Preview
Usage
Captions
Add data-caption to any item and it will appear below the expanded view.
Aspect ratio
Set aspect-ratio on the gallery to enforce a uniform size across all grid items — useful for photo grids.
How it works
On click, the component records the item's getBoundingClientRect() — the First position in FLIP terminology. A fixed-position clone springs to a centered, aspect-ratio-preserved target while a blurred backdrop fades in. Navigation fades out the current clone and springs the next item in from its grid position. On collapse, the spring reverses to the original rect.
Because expand, navigate, and collapse all use the same spring clone, interrupting mid-animation is naturally smooth.
Properties
| Attribute | Property | Type | Default | Description |
|---|---|---|---|---|
| | | string | number | 3 | Grid column count. Accepts any valid CSS repeat() value or a plain number. |
| | | number | 16 | Gap between grid items in px |
| | | string | — | Enforces a uniform aspect ratio on all items, e.g. "4/3", "1/1", "16/9" |
| | | boolean | true | Set to "false" to disable the entrance stagger animation |
Dismiss & navigate
Click the expanded item, the backdrop, or the ✕ button to collapse. Use the ← → buttons or arrow keys to move between items.
Accessibility
When prefers-reduced-motion is set, expand and collapse are instant. The backdrop and UI still appear normally.