#366
Filter list
Filter chips over a list: rows that no longer match shrink and fade out, survivors slide into the gap, and the total counts to its new value.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Filter list" pattern (@codeatlasdev/ui demo #366, motion/transitions) in my app.
Call get_demo({ ids: ["#366"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Filtering a catalog, task list or table where the user must see what disappeared and what stayed.
Keep these library parts, with the props and tokens the demo uses:
- Chip, MotionStage, MotionCtx from "@codeatlasdev/ui"
Behaviour to keep:
- `MotionStage` with `label="Filter list: rows exit and enter as the filter changes"` and `loop={1800}`
- `Chip` from `@codeatlasdev/ui` sets the filter; rows are keyed with `{#each shown as it (it.id)}`
- `in:pop` and `out:pop` run `duration: reduced ? 0 : 240` with `easing: cubicOut`, animating `opacity:${t}; transform: scale(${0.92 + 0.08 * t})`
- `animate:flip={{ duration: m.reduced ? 0 : 320, easing: cubicOut }}` slides the surviving rows
- The total is `new Tween(0, { duration: 420, easing: cubicOut })`
- Under reduced motion every duration is `0`
Exact motion (do not approximate):
- opacity and transform: scale (enter and exit): 240, cubicOut
- position of the surviving rows (flip): 320, cubicOut
- the total (number tween): 420, cubicOut
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
- Chip
@codeatlasdev/ui - MotionStage
@codeatlasdev/ui
How it is built
- `MotionStage` with `label="Filter list: rows exit and enter as the filter changes"` and `loop={1800}`
- `Chip` from `@codeatlasdev/ui` sets the filter; rows are keyed with `{#each shown as it (it.id)}`
- `in:pop` and `out:pop` run `duration: reduced ? 0 : 240` with `easing: cubicOut`, animating `opacity:${t}; transform: scale(${0.92 + 0.08 * t})`
- `animate:flip={{ duration: m.reduced ? 0 : 320, easing: cubicOut }}` slides the surviving rows
- The total is `new Tween(0, { duration: 420, easing: cubicOut })`
- Under reduced motion every duration is `0`
Related
Loading source.