What is easing & easing curves?

Motion Fundamentals

Easing & easing curves

Also searched as: ease, easing curve, bezier curve, interpolation, acceleration curve

Canonical Definition

Easing is the rate at which an animated value changes over time — the mathematical curve defining whether motion accelerates, decelerates, or maintains mechanical constant velocity.

Duration

Entrance: 12-24 frames; Exit: 8-15 frames

Easing Curve

Ease-Out: `cubic-bezier(0.16, 1, 0.3, 1)`; Spring: `{ damping: 14, stiffness: 220 }`

Linear motion is the unmistakable tell of amateur animation. Nothing in the physical world moves at constant velocity from dead stop to instantaneous halt; real objects possess mass and must accelerate and decelerate.

In code-based video, easing is mathematically governed by cubic Bézier functions (`cubic-bezier(x1, y1, x2, y2)`) or spring equations. The choice of curve conveys the emotional tone: high-tension curves feel aggressive and urgent, while soft, extended curves feel luxurious and calm.

The Three Core Bézier Families

Ease-Out, Ease-In, and Ease-In-Out explained

**Ease-Out (Deceleration)**: Fast start, gentle landing. This is the workhorse of UI and motion design (90% of entrances use this), because the human eye needs to spot the moving object immediately and track it as it arrives.

**Ease-In (Acceleration)**: Slow start, explosive exit. Used almost exclusively for object exits where the item leaves the scene.

**Ease-In-Out (S-Curve)**: Slow start, fast midpoint, slow landing. Ideal for continuous camera moves, looping backgrounds, and object repositioning within frame.

Catalog Implementation/Velocity Throw Snap

componentgalleriesInspect in catalog

572 lines of React

How this works: An extreme ease-out curve (`cubic-bezier(0.16, 1, 0.3, 1)`) hurling elements in with instant speed and long, gradual settle.

Immediate high-velocity onset on frame 0
Long deceleration tail preventing abrupt visual collision
Matches human perceptual expectations for arrivals

EasingPatterns.tstsx

import { Easing, interpolate } from "remotion";

export const easeOutExpo = (frame: number, duration: number) => {
  return interpolate(frame, [0, duration], [0, 1], {
    easing: Easing.bezier(0.16, 1, 0.3, 1),
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  });
};

Spring Physics vs. Fixed-Duration Curves

Why natural harmonic oscillators feel more physical than time-based curves

While Bézier curves tie progress to a fixed time duration, spring equations calculate acceleration based on mass, tension, and friction. If an object is interrupted or retargeted, springs preserve velocity naturally without jarring hiccups.

Catalog Implementation/Spring Pop

componenteffectsInspect in catalog

296 lines of React

How this works: A spring oscillator that overshoots target scale before settling into equilibrium.

Dynamic overshoot based on damping ratio
Natural elasticity that feels organic and playful
Frame-independent physical consistency

Engineering Guidelines & Common Pitfalls

Best Practices (What to do)

Default to Ease-Out for any element entering the screen.
Keep curves consistent across a brand: don't mix bouncy cartoon springs with solemn luxury eases in the same reel.

Common Failure Modes (What to avoid)

Using default `linear` interpolation for UI elements: linear moves look robotic, cheap, and unpolished.
Using Ease-In for entrances: elements take too long to become recognizable, making the video feel sluggish.

Generate with AI

Build easing & easing curves in Animatiq

Prompt our motion agent in natural language. Get back typed Remotion React code with custom easing curves, brand palettes, and frame-accurate timing.

Launch in composer

Related motion principles