Reorder List
Code
| 1 | <AnimeLayout |
| 2 | mode="auto" |
| 3 | duration={450} |
| 4 | ease="outExpo" |
| 5 | enterFrom={{ opacity: 0, transform: 'scale(0.9)' }} |
| 6 | leaveTo={{ opacity: 0, transform: 'scale(0.9)' }} |
| 7 | style={{ gap }} |
| 8 | > |
| 9 | {items.map((item) => ( |
| 10 | <AnimeLayoutItem key={getKey(item)} layoutId={getKey(item)} className="w-full"> |
| 11 | {children(item)} |
| 12 | </AnimeLayoutItem> |
| 13 | ))} |
| 14 | </AnimeLayout> |
FLIP-based reorder/shuffle — auto mode animates items as their order changes.
Live previewOpen Playground
Reorder ListFLIP reorder
1Design system
2REST endpoints
3OAuth flow
4Integration tests
5CI/CD pipeline
Props
| Name | Type | Default | Description |
|---|---|---|---|
| mode | 'auto'|'manual' | 'auto' | auto = animate on children change |
| duration | number | 500 | Duration in ms |
| ease | string | 'outExpo' | Easing function |
| layoutId | string | - | Stable id tracking each item across reorders |
| enterFrom | CSSProperties | {opacity:0} | Initial state for entering items |
| leaveTo | CSSProperties | {opacity:0} | Final state for leaving items |
| gap | number | 8 | Gap between items in px |