logo svelte /motion v0.7.7
FIG-001/ DRAG

drag to close drawer.

A mobile bottom sheet you dismiss by dragging the handle down past a threshold. The gesture writes a bound y MotionValue, so the close animation continues from exactly where you let go — and it follows the light/dark theme.

  • Only the handle starts the drag. dragListener={false} plus controls.start(e) on pointerdown means the sheet body stays scrollable while the grip drives the gesture.
  • drag="y" writes the bound style={{ y }} MotionValue, so onDragEnd can read y.get() for the close threshold and animate(y, …) resumes from the dragged position.
  • dragConstraints pins the rest position to the top, while dragElastic={{ bottom: 0.5 }} gives a soft downward pull before it either closes or springs back.
↩ all examples
pattern · drag-to-dismiss sheet mode · live running source

Tap to open the bottom sheet

category · drag
sheet · sheet 01 / 01
⟳ to re-run