logo svelte /motion v0.7.10
FIG-001/ MORPH

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.

  • 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 a percentage border-radius: snapshots bake rounding in as transparency, so proportional radii keep the silhouettes coincident at every scale — no corner ghosting mid-morph.
↩ all examples
pattern · add-pair mode · live running source
category · morph
sheet · sheet 01 / 02
⟳ to re-run
FIG-002/ ENTER/EXIT

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().

  • .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.
↩ all examples
pattern · enter-exit mode · live running source
category · enter/exit
sheet · sheet 02 / 02
⟳ to re-run