logo svelte /motion v2.0.0
FIG-001/ POSITION

a switch knob on data-layout.

The knob is a plain element tagged data-layout. Flipping the switch changes justify-content inside animateLayout, and the knob springs from its old position to its new one.

  • animateLayout(update) measures every tagged element, runs the update — Svelte $state mutations are flushed synchronously, so plain assignment works — then animates each element from its old box to its new one.
  • The knob only moves, so data-layout and data-layout="position" look identical here. Use "position" or "size" to animate one axis of the change and snap the other.
  • Clicking again mid-flight interrupts the spring and continues from the knob's current position — no jump back to the start.
↩ all examples
attr · data-layout mode · live running source
// toggle switch state · off
attr: data-layout update: on = !on
category · position
sheet · sheet 01 / 03
⟳ to re-run
FIG-002/ SHARED

a tab underline that travels.

Only the selected tab renders the highlight and underline. Elements sharing a data-layout-id hand off across the update, and .shared() gives the underline a springier transition than the highlight.

  • Svelte removes the old highlight and underline and mounts new ones under the selected tab. Because they share a data-layout-id, each new element animates from the old one's position and size.
  • .shared('tab-underline', transition) overrides the transition for one id — the underline springs while the highlight uses the default 0.25s ease.
  • Both elements have square corners: plain elements have no tracked border-radius, so a rounded element that changes size would stretch its corners mid-animation.
↩ all examples
attr · data-layout-id mode · live running source
// shared underline tab · overview
attr: data-layout-id .shared('tab-underline')
category · shared
sheet · sheet 02 / 03
⟳ to re-run
FIG-003/ REORDER

shuffling a keyed grid.

Reordering a keyed each block moves the existing tile nodes; animateLayout, scoped to the grid, slides every tile from its old slot to its new one.

  • A keyed each block reorders the existing DOM nodes instead of recreating them, so each tile keeps its identity and animates between grid slots.
  • Passing the grid as the first argument scopes the call: only tagged elements inside it are measured, so the other demos on this page never animate from a shuffle.
↩ all examples
scope · grid mode · live running source
// shuffle grid order · 123456789
01
02
03
04
05
06
07
08
09
scope: grid keyed each · 09 tiles
category · reorder
sheet · sheet 03 / 03
⟳ to re-run

animateLayout