# Pan > A swipe-to-dismiss bottom sheet — the canonical pan-gesture pattern. Pull the sheet down past a threshold or flick fast to dismiss; otherwise it springs back. Velocity-aware release. **Source:** [https://motion.svelte.page/examples/pan](https://motion.svelte.page/examples/pan) **Markdown mirror:** [https://motion.svelte.page/examples/pan.md](https://motion.svelte.page/examples/pan.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: swipe to decide. A Tinder-style card stack — drag horizontally, watch the top card translate AND rotate (one source MotionValue drives both via `useTransform`), and a LIKE / NOPE badge fades in on the relevant side. Release past the 140px distance threshold OR with > 650 px/s velocity flings the card off screen and the stack springs forward. Anything weaker snaps back. **Metadata:** tag: `GESTURE` | pattern: `swipe-card stack` ### Notes - One `useMotionValue` for the top card's horizontal offset, three `useTransform`s on top of it: rotation maps `[-200, 0, 200]` → `[-18°, 0°, 18°]`, and the LIKE / NOPE badge opacities ramp in over the 40–140px gutter. One source, four visuals, can't desync. - The commit gate is distance OR velocity : 140px past origin or > 650 px/s in either direction fires the fly-off. The direction is taken from `Math.sign(info.offset.x)` with `info.velocity.x` as the fallback for fast flicks with sub-threshold distance. - The stack uses three card slots with hard-coded depth (Y offset + scale on the back ones — no actual 3D). On commit, the top card animates to ±600px via a soft spring, then `deck = deck.slice(1)` drops it and the `{#each}` block re-keys the remaining cards forward. ### Source #### SwipeCards.svelte Source file: [src/lib/examples/pan/demos/SwipeCards.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/pan/demos/SwipeCards.svelte) ```svelte

// swipe-deck {String(deck.length).padStart(2, '0')} / {String(SEED.length).padStart(2, '0')} left

{#if deck.length === 0} ({ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', fontFamily: 'var(--brut-mono, monospace)', fontSize: '0.6875rem', 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.5rem 0.875rem', cursor: 'pointer' }))} > ↺ shuffle the deck {:else} {#each deck.slice(0, 3) as card, i (card.id)} {/each} {/if}

← nope like →

``` #### CardItem.svelte Source file: [src/lib/examples/pan/demos/CardItem.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/pan/demos/CardItem.svelte) ```svelte ({ position: 'absolute', top: '50%', left: '50%', width: 260, height: 360, padding: '1.5rem 1.25rem', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', gap: '0.375rem', color: 'var(--brut-accent-ink, #f8fcfb)', border: '1px solid var(--brut-ink, #0a0a0a)', boxShadow: isTop ? '6px 6px 0 var(--brut-ink, #0a0a0a)' : '6px 6px 0 var(--brut-rule, #d6dedb)', background: `linear-gradient(180deg, ${card.from}, ${card.to})`, zIndex, transform: `translate(-50%, calc(-50% + ${ySpring.current}px)) translateX(${ isTop ? x.current : 0 }px) rotate(${(isTop ? rotate.current : 0) + rotateSpring.current}deg) scale(${ scaleSpring.current })`, opacity: isTop ? 1 : 0.96, cursor: isTop ? 'grab' : 'default', pointerEvents: isTop ? 'auto' : 'none', userSelect: 'none', touchAction: 'none', willChange: 'transform' }))} onPan={isTop ? handlePan : undefined} onPanEnd={isTop ? handlePanEnd : undefined} whilePan={isTop ? { cursor: 'grabbing' } : undefined} role="article" aria-label={isTop ? `${card.name} — pan to like or nope` : `${card.name} — behind`} > {#if isTop} LIKE NOPE {/if}

{card.name}

{#if isTop}

{card.line}

← nope · like → {/if} ``` ## FIG-002: flick to dismiss. A bottom sheet that follows your finger as you pull it down. Past 120px OR with downward velocity > 700 px/s, it commits to dismiss. Otherwise it springs back. `pan` gives you offset + velocity; you decide what to do with them. **Metadata:** tag: `GESTURE` | pattern: `swipe-to-dismiss sheet` ### Notes - `onPan` fires every frame with `info.offset` and `info.velocity`. We clamp offset to `>= 0` so the sheet only follows downward drags, and write it straight into a motion value the transform reads. - The release decision in `onPanEnd` is the distance OR velocity pattern: pulled more than 120px past origin or still moving downward faster than 700px/s ⇒ dismiss. Either condition alone fires the close. This is how a real sheet feels — slow pull works, fast flick also works. - The overlay opacity is a `useTransform` of the same sheet offset — at 0px it's fully opaque, at 300px it's transparent. One source value drives both the sheet position and the dimmer, so the visuals can't desync. ### Source #### Default.svelte Source file: [src/lib/examples/pan/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/pan/demos/Default.svelte) ```svelte

// pan-sheet {open ? (armed ? 'armed → dismiss' : `y ${offsetY}px`) : 'dismissed'}

{#if open} ({ position: 'absolute', bottom: 0, left: 0, right: 0, transform: `translateY(${y.current}px)`, padding: '0.875rem 1.25rem 1.5rem', background: 'var(--brut-bg, #f8fcfb)', border: '1px solid var(--brut-ink, #0a0a0a)', borderBottom: 'none', boxShadow: '-6px -6px 0 var(--brut-rule, #d6dedb)', cursor: 'grab', touchAction: 'none', userSelect: 'none', willChange: 'transform' }))} onPan={handlePan} onPanEnd={handlePanEnd} whilePan={{ cursor: 'grabbing' }} role="dialog" aria-label="Demo sheet — pull down or flick to dismiss" > // sheet.01

flick to dismiss

Pull down past 120px, or flick downward at > 700 px/s. The release decision combines both — fast flicks commit even when distance is short.

follows your finger 1:1 while you drag
springs home if you don't pass the threshold
animates off-screen if you do

{/if} {#if !open} ({ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', pointerEvents: 'none' }))} > ({ pointerEvents: 'auto', fontFamily: 'var(--brut-mono, monospace)', fontSize: '0.6875rem', 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.5rem 0.875rem', cursor: 'pointer' }))} > ↑ reopen the sheet {/if}

offset ≥ 120px velocity ≥ 700px/s

```