Pull to Refresh
Dragging past a threshold arms the refresh, and the indicator tracks the finger the whole way.
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 { useEffect, useRef, useState } from "react";
import {
animate,
AnimatePresence,
motion,
useMotionValue,
useMotionValueEvent,
useReducedMotion,About this pattern
The gesture people already know from every mobile feed, built the way it has to be built: the arc, the scale and the arrow are all projections of the drag distance, so the indicator is wherever the finger left it rather than wherever a timeline says it should be. Crossing the threshold arms it — the arc closes, the arrow turns, the wording changes — and releasing early rubber-bands straight back with nothing spent. Only after release does the component take over: it holds the panel open, spins a quarter arc while the request runs, and collapses once the new row has landed. Because the pull is elastic and the snap-back is over-damped, the panel never overshoots its rest position, which is what separates a gesture that feels attached to the finger from one that feels like a video being scrubbed.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Inbox
The message list stretches under the finger and holds a spinner open while it checks for new mail.
Related patterns
- Swipe to ReplyDragging a message uncovers a reply mark that grows with the pull, snaps once at the threshold, and springs back.
- Optimistic Row InsertThe new entry lands at half opacity the instant it is asked for, then firms up when the server agrees.
- Slider Drag ValueThe handle stays under the finger while held, with a value bubble that rises on grab.