Animation mathematics · foundation
Linear interpolation
Linear interpolation computes a value between compatible endpoints A and B using a progress value t: A + (B − A)t, with t = 0 at A and t = 1 at B.
Why it matters
Animation, simulation, data visualization, audio, and graphics all need intermediate values. The formula is simple, but useful results depend on decomposing values into compatible components and choosing an appropriate representation.
Mental model
How to reason about linear interpolation
Treat t as a mixing weight, not as time itself. Apply the same weighted step to each matched component of a number, color, rectangle, or radius vector. If endpoints cannot be decomposed into corresponding components, a host system must normalize, cross-fade, or switch discretely.
Analogy
Mark matching points on two transparent diagrams, then slide every mark the same fraction of its own journey. The method works only when you know which mark at the start corresponds to which mark at the end.
Interactive lab
Move every component by the same fraction
One progress value can blend many kinds of data—once their corresponding components and representation are defined.
41.00
Current result
41.00
Endpoints
What stays linear
The component formula is linear in t. Perceived motion may still be non-linear when a timing function reshapes t, a color-space conversion changes the coordinates, or an incompatible type invokes a fallback.
number interpolation at t 0.35. Current result: 41.00.
Examples
See the boundary, not just the happy path
Worked example · Interpolate one number
lerp(20, 80, 0.25) = 20 + (80 − 20) × 0.25 = 35The result has travelled one quarter of the signed distance from 20 to 80. Values outside the usual 0–1 interval extrapolate beyond the endpoints.
Worked example · Interpolate a rectangle
[x, y, width, height] = lerp([24, 40, 80, 60], [180, 100, 150, 110], t)A rectangle can be represented as four corresponding numeric components. Interpolating them together moves and resizes the shape continuously.
Worked example · Interpolate color components
convert endpoints to one color space → interpolate components → convert for displayMixing the same endpoint colors in sRGB, linear-light RGB, or a perceptual space can produce different midpoints, so the chosen representation is part of the result.
Useful contrast · Gradient structures do not match
linear gradient with 2 stops ↛ radial gradient with 3 stopsThere is no obvious one-to-one pairing for type, geometry, and stops. A system needs an explicit normalization or fallback policy such as cross-fading or a discrete switch.
Common mistakes
Misconceptions to remove early
Confusing interpolation with easing
Linear interpolation maps a supplied t to a value. An easing or timing function changes how clock time produces t; the value interpolation can remain linear after timing is reshaped.
Interpolating unmatched structures blindly
Component-wise interpolation requires compatible representations and correspondence. Different units, coordinate conventions, gradient types, or stop counts need conversion or a defined fallback.
Assuming every color midpoint is the same
Color components depend on their color space and alpha handling. Direct sRGB interpolation, linear-light interpolation, and perceptual interpolation can produce visibly different paths.
Quick check
Can you predict the result?
1. What value does lerp(A, B, 0.5) produce for ordinary numbers?
- • The midpoint A + (B − A) × 0.5
- • Always zero
- • The larger endpoint regardless of A and B
2. Why can two gradients require a fallback instead of component interpolation?
3. What is the relationship between easing and linear interpolation?
Keep building