logo svelte /motion v0.7.8
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
  • 🍅 Tomato
  • 🥒 Cucumber
  • 🧀 Cheese
  • 🥬 Lettuce
category · gesture
sheet · sheet 01 / 02
⟳ to re-run
FIG-002/ 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
  • Aardvark
  • Beaver
  • Capybara
  • Dingo
  • Echidna
  • Fennec
  • Gecko
  • Hedgehog
  • Iguana
  • Jackal
category · scroll
sheet · sheet 02 / 02
⟳ to re-run