Swipe Back Peel
An edge drag peels the top page away under your finger and snaps to whichever side the gesture was heading for.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useState } from "react";
import {
animate,
motion,
useDragControls,
useMotionValue,
useReducedMotion,
useTransform,About this pattern
Direct manipulation, which raises the bar: the page has to sit exactly under the finger, so the drag has no elasticity, no momentum and no lag, and everything expressive is saved for the release. One motion value carries the whole gesture — the drag writes to it, the release animates it, and the page behind reads from it — which is why a finger and a spring can hand off mid-flight without a seam, and why you can see how far back you would land before committing. On release either measure can win: a long slow drag past a third of the width, or a short fast flick. Requiring both is what makes a swipe-back feel sticky. The gesture starts only from a thumb-wide edge strip, because a page-wide drag listener fights every scroll and tap on the screen.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Mobile navigation
An edge drag pulls the previous page in behind the current one.
Related patterns
- Swipe to ReplyDragging a message uncovers a reply mark that grows with the pull, snaps once at the threshold, and springs back.
- Nested Menu DrillA submenu pushes the parent list aside inside the same panel, and the panel resizes to fit it.
- Split View ResizeDragging the divider resizes both panes live, and releasing it settles the split on the nearest stop.