Project momentum to snap
On release, snap to the point nearest where momentum would land.
From apple-design, §6 Momentum projection.
A sheet with three detents
Flick a sheet up a short way, fast, or use the buttons.
Nearest to releaseBad
Full
Half
Peek
Directions
Nearest to projectionGood
Full
Half
Peek
Directions
const project = (v, d = 0.998) => (v / 1000) * d / (1 - d);
const target = nearest(DETENTS, y + project(v));Flick a little, drag a lot
Flick a card slightly, or drag slowly past halfway.
Rounds the releaseBad
Slide 1 of 6
Projects, max one pageGood
Slide 1 of 6
const page = Math.round((offset + project(v)) / pageWidth);
const target = clamp(page, startPage - 1, startPage + 1);Deceleration sets distance
Set a velocity, then throw.
Same speed, two ratesTry it
d = 0.998normald = 0.99snappyv *= d; position += v / 1000;Why it matters, pros and cons
Why it matters
A flick says where it should go. Snapping from release ignores fast flicks.
Pros
- Short flicks travel far.
- Flicking back reverses a past-halfway drag.
- Matches familiar scroll deceleration.
Cons
- Noisy velocity needs averaging over 100 ms.
- Paged content needs a one-page cap.
- Destructive targets also need a velocity threshold.