How Easing Functions Shape Motion

Why Easing Matters

Linear motion feels robotic. Real objects accelerate and decelerate. Easing functions bridge the gap between math and natural movement, making interfaces feel alive.

linear

ease

ease-in-out

The Math: De Casteljau's Algorithm

A bezier curve isn't magic—it's recursive linear interpolation. The algorithm finds points along the curve by repeatedly interpolating between control points at a given t value (0 to 1).

t = 0t = 1

t = 0.50

The Algorithm

Start with 4 control points (P0, P1, P2, P3)
Lerp between adjacent pairs at t
Lerp between those results
Lerp once more for the final point

lerp(a, b, t) = a + (b - a) * t

As t goes from 0 to 1, the final point traces the curve. This recursive subdivision is why bezier curves are so efficient to compute.

The Bezier Curve Editor

A cubic bezier is defined by four points: two fixed endpoints (0,0) and (1,1), plus two control points you can drag. The x-axis is time, y-axis is progress.

cubic-bezier(0.25, 0.10, 0.25, 1.00)

Drag the control points to shape the curve. The x-axis represents time (0 to 1), and the y-axis represents progress (0 to 1).

The Penner Equations

Robert Penner's easing equations from 2001 became the foundation for motion design. Each family—quad, cubic, quart, expo, sine, circ, back, elastic, bounce—has in, out, and in-out variants.

easeOutCubic

t³

Cubic: the default for most UI animations, natural feel.

Easing Families Compared

Quadratic is subtle, exponential is dramatic. Elastic overshoots and oscillates, bounce simulates a ball hitting the ground. Each creates a distinct personality.

easeDefault CSS ease

cubic-bezier(0.25, 0.1, 0.25, 1)

The Easing Playground

See how different easing functions affect real animations. Compare multiple curves side-by-side across position, scale, rotation, and opacity.

Duration:1s

linear

ease-out

ease-in-out

ease-out-back

Beyond Bezier: Spring Physics

Springs don't follow bezier curves—they simulate real physics with mass, stiffness, and damping. This creates organic motion that can be interrupted mid-flight.

Stiffness100How quickly the spring snaps back

Damping10How quickly oscillations settle

Mass1Weight affects momentum

{ type: "spring", stiffness: 100, damping: 10, mass: 1 }

Unlike bezier curves which map time to progress, springs simulate real physics. They can be interrupted mid-animation and will naturally continue from their current velocity.

CSS Steps: Discrete Motion

Not all motion is smooth. The steps() function creates frame-by-frame animation—perfect for sprite sheets, typewriter effects, or intentionally choppy motion.

Steps:4

CSS timing function

steps(4, jump-end)

jump-end (default): The first step happens at t=1/n.
jump-start: The first step happens immediately at t=0.

Sprite sheet example:

Frame 1 / 4

Perfect for sprite animations, typewriter effects, clock ticks, or any motion that should feel discrete rather than smooth.

Easing in Practice

Different UI patterns call for different easings. Entrances typically ease-out (fast then slow), exits ease-in (slow then fast), and emphasis animations often overshoot.

Modal

Scale + fade with ease-out

Entrances: Use ease-out — elements should arrive quickly and settle gently.

Exits: Use ease-in — elements should accelerate as they leave.

Emphasis: Use ease-out-back or spring — a slight overshoot adds energy.

Hover/Press: Use spring — responds naturally to user interaction.

Respecting User Preferences

Some users experience motion sickness or vestibular disorders. The prefers-reduced-motion media query lets you provide alternatives—essential for accessible motion design.

Simulate reduced motion

System: no-preference

CSS

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

JavaScript

const prefersReduced = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches

const transition = prefersReduced
  ? { duration: 0 }
  : { type: 'spring', stiffness: 300 }

Accessibility Note

About 35% of adults experience motion sensitivity. When prefers-reduced-motion is set, replace animations with instant transitions or simple fades. Never remove feedback entirely — users still need to know something happened.