Chapter 2

Physics Feel

What happens after your finger lifts? Physics govern the motion after release — momentum, friction, springs, and elastic boundaries. These behaviors are what make gesture-driven interfaces feel natural and alive.

Part A

After Release

The moment your finger lifts, velocity doesn't vanish — it transfers to the content. Understanding momentum, friction, and decay prediction is fundamental to making interfaces that feel physically honest.

Momentum

When you fling a list on your phone, it doesn't stop the instant your finger lifts. It continues to scroll, as though the surface has inertia. This is momentum scrolling — the velocity captured at release is carried forward.

Without momentum, every scroll would feel like dragging through mud. With it, a quick flick sends content flying exactly as far as your intent suggests.

fig-200 · momentum scroll

Friction

Momentum doesn't last forever. Friction gradually slows the content until it stops. The friction coefficient is the single most important tuning knob for scroll feel.

iOS and Android use different friction values — this is why the same fling gesture feels different on each platform. Too little friction and content feels “slippery”; too much and it feels “sticky.”

Try the slider below to feel the difference:

Decay

Momentum gives you the starting velocity. But what happens next? The velocity doesn't vanish instantly — it decays, following an exponential curve: fast at first, then gradually tapering off.

This shape is what makes deceleration feel natural. Linear deceleration (constant braking) would feel robotic. Exponential decay feels like real friction — the slower you're going, the less force acts on you.

Fling the dot below. Watch the ghost marks: evenly spaced in time, but not in space. The wide gaps at the start and the tight gaps at the end — that's the decay curve made visible.

fig-201 · exponential decay

Part B

Springs

Springs are the foundation of responsive animation. Unlike duration-based animations, springs can be interrupted at any moment and respond gracefully — this is what makes interfaces feel fluid rather than canned.

Why Springs?

When you drag a sheet down and let go, it bounces back. That bounce is not a programmed animation — it's a simulated spring. This distinction matters profoundly.

Traditional CSS animations are defined by duration + easing curve (e.g. transition: 0.3s ease-in-out). This approach has a fatal flaw: the animation can't be interrupted gracefully. If the user touches mid-animation, the system has to either jump to the end or restart. Neither feels right.

Springs solve this because they are state-based, not time-based. A spring knows its current position and velocity. At any moment, you can change its destination, and it will smoothly redirect — preserving momentum. There's no “duration” to a spring. It settles when the physics say it settles.

Spring personality

A spring's character is defined by stiffness (how aggressively it pulls back) and damping (how quickly oscillations die out):

Feel	Character	When to use
Bouncy	High stiffness, low damping	Playful interactions, toggles, badges
Snappy	Moderate stiffness, critically damped	Sheet dismissals, navigation, most UI
Heavy	Lower stiffness, overdamped	Modal overlays, important state changes

fig-202 · spring physics

Elastic

Elastic is a spring with exaggerated overshoot. Where a typical spring settles smoothly, an elastic spring intentionally overshoots the target and oscillates visibly before settling. Think of a rubber band snapping back.

The effect is achieved by reducing damping (letting the spring ring longer) while keeping stiffness high. The result: a bouncy, playful motion that draws attention.

Use elastic sparingly. It's perfect for:

• Celebratory moments — badges, achievements, confirmations
• Attention-grabbing — notifications, errors that need action
• Playful UI — toggles, reactions, emoji

Avoid elastic for frequent interactions. The exaggerated bounce becomes fatiguing when repeated dozens of times per session.

fig-202b · elastic spring

Fling & Snap

Many interfaces need to quantize position after release. A carousel snaps to whole pages. A drawer snaps to open or closed. A picker snaps to discrete values.

The pattern: on release, use an exponential decay model to predict where the content would naturally come to rest — target = pos + v / (1 − decayRate). Round that predicted position to the nearest valid snap point, then drive there with a critically damped spring (ζ = 1.0). The fling velocity seeds the spring’s initial velocity, so the transition is seamless — no jump, no pause. A fast fling predicts further and skips items; a slow release snaps to the nearest one.

fig-203 · discrete picker

Part C

Boundaries

What happens at the edges? Hard stops feel like walls. Elastic boundaries communicate limits while preserving the illusion of a continuous physical world.

Rubber Band / Overscroll

What should happen when you drag past the edge of a scrollable region? The content could stop dead — but that feels like hitting a wall. Instead, most platforms use a rubber band effect: content follows your finger with increasing resistance, like stretching an elastic band.

The key: the mapping from finger displacement to visual displacement becomes nonlinear past the boundary. The further you drag, the less the content moves per pixel of finger travel.

This is a communication device. The increasing resistance tells you “you've reached the end” in a way that feels physically honest, without the jarring hard stop of a wall.

fig-204 · rubber band

Bounce-Back

Bounce-back is the complement of rubber banding. While rubber banding controls what happens during a drag past the boundary, bounce-back controls what happens on release.

When your finger lifts while the content is over-scrolled, a spring pulls it back to the nearest valid boundary. The transition must be seamless: the spring starts from the rubber-banded display position (not the raw finger position), so there's no visual jump when the drag ends and the bounce begins.

Together, rubber band + bounce-back create the elastic snap you feel at the end of every iOS scroll. It's boundary behavior that feels like physics, not code.

fig-205 · overscroll bounce

Putting it together

The physics in this chapter work together to create fluid, responsive interfaces:

• Momentum — velocity transfers on release
• Friction — gradual deceleration
• Decay — exponential deceleration, and target prediction
• Springs — interruptible, state-based animation
• Fling & snap — decay-targeted, critically damped spring to nearest snap point
• Rubber band — elastic resistance at boundaries
• Bounce-back — spring return from overscroll

In the next chapter, we'll see how these primitives combine into interaction patterns — pull-to-refresh, carousels, reorderable lists, and elastic sliders.