Remotion Animation — Creating Motion with spring() and interpolate()
Natural video animation with physics-based springs and interpolation functions
Animation in Remotion is a pure function with frame number as input and style values as output.
interpolate(frame, inputRange, outputRange): The most basic animation tool. Mapping frames 0-30 to opacity 0-1 creates a fade-in, to position -100-0 creates a slide-in. extrapolateLeft/extrapolateRight options control out-of-range behavior (clamp, extend, etc.).
spring({frame, fps, config}): Physics-based spring simulation. Adjust motion feel with mass, damping, and stiffness. Returns a value that starts at 0 and converges to 1, so combining with interpolate enables expressions like "text bouncing in with spring effect".
The key is that everything is deterministic. Same frame number always produces the same result, making rendering predictable and reproducible.
How It Works
Get current frame number with useCurrentFrame()
Map frame range to value range with interpolate(frame, [0, 30], [0, 1])
Generate physics-based easing with spring({frame, fps: 30, config: {damping: 10}})
Feed spring value into interpolate for final style calculation: scale, translateY etc.
Apply to React component with style={{ opacity, transform: `translateY(${y}px) scale(${s})` }}
Pros
- ✓ Deterministic: same frame → same result, rendering reproducibility guaranteed
- ✓ Various motion feels (elastic, heavy, fast etc.) with just spring config tweaks
- ✓ Unlike CSS keyframes, full frame-level precision control
Cons
- ✗ Complex motions lead to deep spring + interpolate chaining reducing code readability
- ✗ No visual easing editor like After Effects graph editor