FIG-001/ GRID-EXIT
exit in place, then FLIP the survivors.
A fixed 3-column processing strip. Each card combines layout with enter/exit animations inside <AnimatePresence>: completing a job fades its card out in the slot it currently occupies, and only then do the surviving cards slide over — one smooth FLIP, no snapping.
- In the default
syncmode, an exiting card keeps its grid slot until itsexitanimation finishes — the card fades out exactly where it stands, even when earlier removals have already moved it to a new column. Survivors don't reflow mid-exit. - The
layoutprop does the second half: once the slot frees up, each surviving card FLIPs from its old column to its new one on the same spring — position is animated with transforms, so nothing repaints or stutters. - The cards render from a keyed
{#each}with a stablekeyper job. Stable keys are what letAnimatePresencedistinguish "this card left" from "every card changed" — without them, exits and FLIPs can't be attributed to the right element.
// processing queue 03 / 03 slots
mode: sync / layout: flip
category · grid-exit
sheet · sheet 01 / 01
⟳ to re-run