Swipe to Reply
Dragging a message uncovers a reply mark that grows with the pull, snaps once at the threshold, and springs back.
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 { useRef, useState } from "react";
import {
AnimatePresence,
animate,
motion,
useMotionValue,
useMotionValueEvent,
useReducedMotion,About this pattern
The gesture is the interface here, so nothing about it is pre-recorded: the mark's opacity, scale, turn and offset are all projections of how far the message has travelled, which means it sits exactly where the finger left it rather than where a timeline says it should be. Crossing the threshold does the one thing a projection cannot — it snaps, once, as feedback for passing a line you cannot see. Releasing rubber-bands the message home with an over-damped spring whether or not the reply was armed, because a message that boings past its resting place feels like a toy the second time you use it. What is left behind is the outcome rather than another animation of it: the composer opens a quoted line naming who is being answered, cancellable in one tap.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Chat thread
Dragging a bubble sideways reveals a reply arrow and opens a quoted composer on release.
Related patterns
- Swipe Back PeelAn edge drag peels the top page away under your finger and snaps to whichever side the gesture was heading for.
- Share Sheet PresentThe panel rises over a dimmed page and its destinations arrive in a quick wave.
- Message Reaction AttachThe chosen glyph flies out of the picker and docks at the corner of the bubble it belongs to.