iOS-feel motion

Three things make iOS feel good: the rubber band at scroll edges, springs instead of timed eases, and animations that carry velocity when interrupted. Apply all three. Never use linear motion or fixed-duration eases for anything the finger touches.

Source: justinbuilds.mov, “Why does iOS feel so nice to use” (blog.justinbuilds.mov/ios). The values were read from the iOS 27 binary and measured by running Apple’s frameworks. Section 4 (momentum) comes from Apple’s WWDC18 talk Designing Fluid Interfaces.

1. Rubber banding (overscroll)

When the finger drags past an edge, move the content by this amount:

overscroll(x) = (c * x * d) / (d + c * x)

• x = distance the finger has gone past the edge, in px/pt (use the absolute value and apply the sign afterward)
• d = viewport size along that axis, about one screen
• c = coefficient: 0.55 for touch (default). Other inputs: small trackpad 0.715, large trackpad 0.17, continuous mouse 0.4, hi-res wheel 0.17, low-res wheel 0.5

Properties to preserve:

• Near the edge, content moves 55% of the finger distance, and that share shrinks the further you drag. After one full screen of drag, each extra point moves the content only about 0.23 pt.
• Content can never move more than d. The curve is a rational function, NOT a log curve and NOT a flat 55% multiplier. Don’t swap in either one.
• The same curve drives the interactive back-swipe, so reuse it for sheets and drawers that are dragged past their limits.
• On release, spring back to the edge, passing the release velocity into the spring (see section 3).

Sanity check (d=844, c=0.55): 25 → 13.5, 100 → 51.6, 844 → 299.5, 3000 → 558.4.

const rubberBand = (x, d, c = 0.55) => {
  const s = Math.sign(x), a = Math.abs(x);
  return s * (c * a * d) / (d + c * a);
};