# View Transitions > Shared-element morphs and filtered galleries with animateView — the browser View Transitions API driven by Motion timing. **Source:** [https://motion.svelte.page/examples/view](https://motion.svelte.page/examples/view) **Markdown mirror:** [https://motion.svelte.page/examples/view.md](https://motion.svelte.page/examples/view.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: shared-element morphs. The "now playing" pattern: click a tile and it morphs into the detail hero — two different elements paired into one view-transition layer with .add(thumb, hero). Closing morphs it back. **Metadata:** tag: `MORPH` | pattern: `add-pair` ### Notes - `animateView(update)` snapshots the page, runs the update — Svelte `$state` mutations are flushed synchronously, so plain assignment works — then animates between snapshots. - `.add(oldTarget, newTarget)` pairs two different elements into one layer: the first resolves in the old snapshot, the second in the new one, and the browser morphs between them. Names are generated and cleaned up automatically. - Both endpoints share the same `border-radius` (a hard 0): snapshots bake rounding in as transparency, so identical radii keep the silhouettes coincident at every scale — no corner ghosting mid-morph. ### Source #### SharedElement.svelte Source file: [src/lib/examples/view/demos/SharedElement.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/view/demos/SharedElement.svelte) ```svelte

// shared element {selected ? `detail · ${selected.id}` : 'grid · 04 albums'}

{#if selected}

{selected.title}

({ fontFamily: 'var(--brut-mono, monospace)', fontSize: '0.6875rem', textTransform: 'uppercase', letterSpacing: '0.08em', border: '1px solid var(--brut-ink, #0a0a0a)', backgroundColor: 'var(--brut-bg, #f8fcfb)', color: 'var(--brut-ink, #0a0a0a)', padding: '0.5rem 0.875rem', cursor: 'pointer' }))} > ← back

{:else}

{#each albums as album (album.id)} {/each}

{/if}

pattern: add-pair morph: thumb ↔ hero

``` ## FIG-002: filtering with view layers. Filtering the grid inside animateView: surviving shapes glide to their new slots while entering and leaving shapes scale-fade through .enter() and .exit(). **Metadata:** tag: `ENTER/EXIT` | pattern: `enter-exit` ### Notes - `.add('[data-view-item]')` registers every matched element — items present in both snapshots morph to their new grid slots automatically. - `.enter()` animates pure newcomers and `.exit()` pure leavers; survivors get neither, they just morph. `.new()`/`.old()` are the ungated variants for crossfades on surviving layers. - Rapid filter clicks queue behind the in-flight transition (`interrupt: 'wait' , the default) — pass interrupt: 'immediate'` to skip ahead instead. ### Source #### FilterGallery.svelte Source file: [src/lib/examples/view/demos/FilterGallery.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/view/demos/FilterGallery.svelte) ```svelte

// filter gallery {filter} · {String(visible.length).padStart(2, '0')} / 12

{#each ['all', 'circle', 'square'] as const as kind (kind)} setFilter(kind)} whileHover={{ scale: 1.04 }} whileTap={{ scale: 0.96 }} transition={{ type: 'spring', stiffness: 500, damping: 30 }} style={filterButtonStyle(filter === kind)} > {kind} {/each}

{#each visible as item (item.id)} {/each}

pattern: enter-exit layer: [data-view-item]

```