logo svelte /motion v0.9.1
FIG-001/ LAYOUT

frequent renders, gated measurement.

Both boxes have layout and re-render constantly (their color cycles). The left box re-measures on every render; the right box passes layoutDependency={dep}, so it only re-measures when dep changes — watch its counter stay flat.

  • Every render recolors both boxes — a stand-in for live text or streaming values that re-render a layout element often.
  • The gated box passes layoutDependency={dep}, so its measure counter only moves when dep changes on Reflow.
  • Both still FLIP-animate to their new position on Reflow — gating skips the wasted measurements, not the real ones.
↩ all examples
api · layoutDependencyinput · layoutmode · live mode · live running source
// no gate re-measures every render

0 measures

A
// layoutDependency measures only on dep change

0 measures

B
category · layout
sheet · sheet 01 / 02
⟳ to re-run
FIG-002/ LAYOUT

keyed list, what to gate on.

Rows are layout="position" in a keyed {#each} sorted by activity. Gated on a per-row field, only the bumped row animates and the rows it displaces jump — upstream parity. Gate on the row index and every moved row slides.

  • Bumping a row re-sorts the list. With layoutDependency={row.ts} only that row's dependency changed, so only it FLIPs — the displaced rows jump, exactly as upstream MeasureLayout behaves.
  • Switch to layoutDependency={i}: the index changes for every row whose slot changed, so every moved row animates and untouched rows stay gated.
  • Don't need the gate in a list? Omit layoutDependency and every reorder animates every row.
↩ all examples
api · layoutDependencyinput · keyed eachmode · live mode · live running source
  • Design review ts 5
  • Sprint planning ts 4
  • Bug triage ts 3
  • Release notes ts 2
  • On-call handoff ts 1

layoutDependency={row.ts} — bump a row: it slides up, the rows it displaces jump (their dependency didn't change).

category · layout
sheet · sheet 02 / 02
⟳ to re-run

layoutDependency