# Mobile Drawer > A theme-aware drag-to-close bottom sheet built with drag, a bound y MotionValue, and dragControls in Svelte Motion. **Source:** [https://motion.svelte.page/examples/mobile-drawer](https://motion.svelte.page/examples/mobile-drawer) **Markdown mirror:** [https://motion.svelte.page/examples/mobile-drawer.md](https://motion.svelte.page/examples/mobile-drawer.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: 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. **Metadata:** tag: `DRAG` | pattern: `drag-to-dismiss sheet` ### Notes - 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. ### Source #### Default.svelte Source file: [src/lib/examples/mobile-drawer/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/mobile-drawer/demos/Default.svelte) ```svelte
// mobile drawer state: {open ? 'open' : 'closed'}

Tap to open the bottom sheet

(open = true)} whileHover={{ y: -2, scale: 1.04 }} whileTap={{ y: 0, scale: 0.96 }} transition={{ type: 'spring', stiffness: 500, damping: 30 }} style={styleString(() => ({ fontFamily: 'var(--brut-mono, monospace)', fontSize: '0.6875rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', border: '1px solid var(--brut-accent, #247768)', backgroundColor: 'var(--brut-accent-soft, rgba(36, 119, 104, 0.1))', color: 'var(--brut-accent, #247768)', padding: '0.6rem 1rem', cursor: 'pointer' }))} > Open drawer
{#if open} e.stopPropagation()} onDragEnd={() => { if (y.get() >= 100) handleClose() }} >

Drag me down to close

Grab the handle and pull this sheet down past the threshold to dismiss it, or tap the backdrop. The drag writes the bound y MotionValue, and the close animation continues from wherever you let go.

Release before the threshold and it springs back into place with a little elastic give.

{/if}
drag y · threshold 100px elastic 0.5 · ease in-out
```