Flip layout
List-to-grid view switch where items glide between layouts, and sorting and filtering animate too, using motion layout animation; instant under reduced motion.
Preview
- Launch notesDoc · 12 KB
- Pricing tableSheet · 8 KB
- Hero renderImage · 4.2 MB
- Q4 forecastSheet · 22 KB
- Press kitDoc · 640 KB
- Team photoImage · 3.1 MB
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| layout | "list" | "grid" | — | FlipLayout: current arrangement; switching animates every item. |
| columns | number | string | 3 | FlipLayout: grid columns, or a grid-template-columns value. |
| FlipItem | motion.li props | — | One item; key it by a stable id so sort and filter animate. |
| FlipPart | motion.div props | — | Content that moves with its item but never stretches. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.