logo svelte /motion v0.9.0
FIG-001/ GESTURE

drag to reorder.

The motion.dev grocery list. Grab any item and drag it vertically — the dragged item pins under the cursor while its siblings spring out of the way, and releasing snaps it into its new slot.

  • Reorder.Group owns the order: it watches each drag and, when an item's edge crosses the midpoint of a neighbor, calls onReorder with the swapped array. Assigning that back to $state is the whole wiring.
  • axis="y" locks item drags vertically. Items key on their own value in the {#each} block — the same value passed to Reorder.Item's value prop.
  • whileDrag passes straight through to the underlying motion component — the lifted item scales up and gains a shadow while the gesture is active.
↩ all examples
pattern · reorder-group mode · live running source
// reorder drag to sort
  • 🍅 Tomato
  • 🥒 Cucumber
  • 🧀 Cheese
  • 🥬 Lettuce
category · gesture
sheet · sheet 01 / 04
⟳ to re-run
FIG-002/ GRID

reorder in two dimensions.

Drag one tile horizontally and vertically across wrapped rows. Every displaced tile springs into its new slot during the same continuous gesture.

  • axis="xy" clusters overlapping boxes into visual rows and chooses the nearest row and horizontal insertion slot as the tile moves.
  • One uninterrupted gesture can cross both axes while keyed siblings FLIP into every newly vacated slot.
  • The consumer still owns one flat values array; Reorder maps the visual wrapped layout back to that logical order.
↩ all examples
axis · xy mode · live running source
// reorder — xy A · B · C · D · E · F
  • A
  • B
  • C
  • D
  • E
  • F
category · grid
sheet · sheet 02 / 04
⟳ to re-run
FIG-003/ RTL

detect direction, respect intent.

This horizontal group omits axis and renders RTL. Geometry selects horizontal dragging automatically, and visual leftward movement advances the logical data order without reversing the array.

  • Omitting axis lets measured geometry select x, y, or xy; no orientation prop is needed for this row.
  • Direction comes from the group's computed style, so nested RTL regions behave correctly without changing document direction.
  • Consumers keep values in logical order. Reorder interprets horizontal insertion in the visual direction instead of asking you to reverse the array.
↩ all examples
axis · auto mode · live running source
// axis — auto dir: rtl
  • Aleph
  • Bet
  • Gimel
  • Dalet
category · rtl
sheet · sheet 03 / 04
⟳ to re-run
FIG-004/ SCROLL

reordering long lists.

Ten items in a 280px scroll container. Drag an item toward the top or bottom edge and hold — the container auto-scrolls beneath the held item so a single gesture can carry it the length of the list.

  • The scroll container is a motion.div with layoutScroll, so layout measurements are taken in the container's coordinate space and stay correct at any scroll position.
  • Holding a dragged item within 50px of the container's edge auto-scrolls it — speed ramps up quadratically as the pointer nears the edge, and scrolling only starts when the gesture is moving toward that edge.
  • Items keep reordering while the content scrolls beneath the held pointer, so one gesture can carry an item from the top of the list to the bottom.
↩ all examples
pattern · auto-scroll mode · live running source
// reorder — scrollable 10 items
  • Aardvark
  • Beaver
  • Capybara
  • Dingo
  • Echidna
  • Fennec
  • Gecko
  • Hedgehog
  • Iguana
  • Jackal
category · scroll
sheet · sheet 04 / 04
⟳ to re-run

Reorder