layoutDependency

layoutDependency tells a layout element when to re-measure. By default a layout element recomputes its FLIP box on every render that touches its class, style, layoutId, or transition. When you pass layoutDependency, measurement is gated on only that value — the element stops re-measuring on unrelated renders and only snapshots when the dependency changes.

It’s a performance optimization for layout elements that re-render often but rarely change box.

<script lang="ts">
  import { motion } from '@humanspeak/svelte-motion'

  // `order` changes only when the list is actually reordered.
  let { order } = $props()
</script>

<motion.div layout layoutDependency={order} />

<script lang="ts">
  import { motion } from '@humanspeak/svelte-motion'

  // `order` changes only when the list is actually reordered.
  let { order } = $props()
</script>

<motion.div layout layoutDependency={order} />

In the example above, both boxes re-render constantly (their color cycles). The left box re-measures on every render — its measure counter climbs. The right box passes layoutDependency={dep}, so its counter stays flat until Reflow bumps the dependency.

When to use it

Reach for layoutDependency when a layout element:

• re-renders frequently (live text, streaming values, a ticking clock), and
• only changes layout box on a specific, known signal.

Pass a value that changes exactly when the layout should be re-measured — commonly a counter, a sorted key, or the array length / order of a list.

<motion.ul layout layoutDependency={items.length}>
  {#each items as item (item.id)}
    <motion.li layout layoutDependency={items.length}>{item.label}</motion.li>
  {/each}
</motion.ul>

<motion.ul layout layoutDependency={items.length}>
  {#each items as item (item.id)}
    <motion.li layout layoutDependency={items.length}>{item.label}</motion.li>
  {/each}
</motion.ul>

Any defined value gates — including falsy ones like 0, '', or null. Leave it undefined (the default) to keep framer-motion’s “measure on every render” behavior.

API Reference

layoutDependency

layoutDependency?: unknown

layoutDependency?: unknown

Pass any value to a layout motion.* component. While it is defined, measurement is gated on changes to this value; while it is undefined, measurement follows the default render-driven behavior. Requires layout to be enabled.

Based on Motion’s layoutDependency prop.