#361
FLIP reorder
A sortable list whose rows slide to their new position instead of teleporting when the sort changes (First, Last, Invert, Play).
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "FLIP reorder" pattern (@codeatlasdev/ui demo #361, motion/transitions) in my app.
Call get_demo({ ids: ["#361"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Sorting or filtering a table, leaderboard or card list where the user must keep track of which row went where.
Keep these library parts, with the props and tokens the demo uses:
- Button, MotionStage, MotionCtx from "@codeatlasdev/ui"
Behaviour to keep:
- `MotionStage` with `label="FLIP reorder: rows slide to their new place when the sort changes"` and `loop={2400}`
- Measure `getBoundingClientRect().top` before the reorder, `await tick()`, measure again, then `el.animate(` from `translateY` of the difference to `translateY(0)`
- Rows keep a stable key: `{#each ordered as r (r.id)}` so Svelte moves the node instead of recreating it
- Under reduced motion the order changes with no animation
Exact motion (do not approximate):
- transform: translateY (inverted offset to 0): 420, cubic-bezier(0.2, 0, 0, 1)
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- Button
@codeatlasdev/ui - MotionStage
@codeatlasdev/ui
How it is built
- `MotionStage` with `label="FLIP reorder: rows slide to their new place when the sort changes"` and `loop={2400}`
- Measure `getBoundingClientRect().top` before the reorder, `await tick()`, measure again, then `el.animate(` from `translateY` of the difference to `translateY(0)`
- Rows keep a stable key: `{#each ordered as r (r.id)}` so Svelte moves the node instead of recreating it
- Under reduced motion the order changes with no animation
Related
Loading source.