The concepts

In-betweening & bezier splines

Animation is the art of change over time. Two ideas do most of the heavy lifting: in-betweening, which fills the gaps between drawings, and bezier splines, the curves that decide exactly how that filling moves.

What is in-betweening?

In traditional studios, a lead animator draws the most important poses — the keyframes. A second artist, the in-betweener, draws all the frames in between to make the motion continuous. The word survives in digital tools as tweening: you set a start and an end, and the computer generates everything between.

Naïvely, you could space those in-between frames evenly in a straight line. But real motion almost never moves at a constant speed in a straight line — a ball accelerates as it falls, a character eases out of a pose. To describe how the in-betweens are distributed in space and time, we need a curve. That curve is usually a bezier.

What is a bezier spline?

A bezier curve is a smooth curve defined by a handful of points. The most common is the cubic bezier, set by four points: two anchors the curve passes through (P0, P3) and two control points (P1, P2) that act like magnets, pulling the curve toward them without ever quite touching.

Mathematically, every point on a cubic bezier is a blend of the four points, weighted by a parameter t that runs from 0 to 1:

B(t) = (1−t)³·P0 + 3(1−t)²t·P1 + 3(1−t)t²·P2 + t³·P3

A beautiful way to see this is De Casteljau's algorithm: interpolate between each pair of points by t, then interpolate between those results, and again, until a single point is left. That final point sits exactly on the curve — and sliding t from 0 to 1 sweeps it along. (Demo 4 animates this.)

A spline is what you get when you chain several bezier curves end-to-end, matching their slopes where they meet so the join is seamless. That lets a single smooth path wander through many waypoints — exactly what you want for a camera move or a character's trajectory.

How the two fit together

Bezier curves show up in animation in two complementary roles:

• As a path through space. The object literally travels along the curve; t is its progress from start to end. (Demos 3 and 6.)
• As an easing curve for time. Here the curve plots time on one axis and progress on the other. A gentle S-curve means the animation starts slow, speeds up, and settles — the classic slow-in / slow-out. This is exactly what CSS cubic-bezier() does. (Demo 2.)

Where you've seen them

Bezier curves are everywhere once you know to look: the pen tool in Illustrator, Photoshop, and Figma; vector fonts (every letter outline is bezier segments); motion graphics and game engines; SVG <path> data; and the easing of nearly every UI animation on the web.

They were popularised in the 1960s by Pierre Bézier at Renault and Paul de Casteljau at Citroën — both working on how to describe the smooth curves of car bodies. Sixty years later the same math animates pixels.