Element: #366 Filter list (motion/transitions) What it shows: 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. When to use: Filtering a catalog, task list or table where the user must see what disappeared and what stayed. Spec: - `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` Motion: - opacity and transform: scale (enter and exit): 240 cubicOut - position of the surviving rows (flip): 320 cubicOut - the total (number tween): 420 cubicOut Names: Animated filter | List exit animation | Presence animation | Filtro animado | Filtro animado de lista Tags: motion, filter, list, exit, flip Needs: @codeatlasdev/ui@4.6.0 Components: Chip, MotionStage Live demo: https://ui.codeatlas.com.br/docs/motion/transitions#filter-list {#snippet children(m)}
{ stage = m; }}>
{#each filters as f (f)} (filter = f)} /> {/each}

{shown.length} projects, R$ {Math.round(total.current).toLocaleString('pt-BR')}

{/snippet}