Element: #361 FLIP reorder (motion/transitions)
What it shows: A sortable list whose rows slide to their new position instead of teleporting when the sort changes (First, Last, Invert, Play).
When to use: Sorting or filtering a table, leaderboard or card list where the user must keep track of which row went where.
Spec:
- `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
Motion:
- transform: translateY (inverted offset to 0): 420 cubic-bezier(0.2, 0, 0, 1)
Names: FLIP reorder | List reorder animation | Layout animation | Reordenar lista com animação | Animación de reordenación
Tags: motion, flip, reorder, list, sort
Needs: @codeatlasdev/ui@4.6.0
Components: Button, MotionStage
Live demo: https://ui.codeatlas.com.br/docs/motion/transitions#flip-reorder
{#snippet children(m)}
{ stage = m; }}>
{#each Object.entries(sorts) as [key, s] (key)}
{/each}