Remotion frame-driven animation

Contract

In Remotion, motion is rendered frame-by-frame on a server, not played in a browser. Every animated value MUST be a pure function of the current frame. Apply this whenever you write a Remotion component that moves, fades, scales, rotates, counts, or otherwise changes over time.

Rules

1. Drive from the frame. Read the current frame with useCurrentFrame() (imported from remotion)

and compute every animated style from it. The component must be a pure function of that frame — the same frame always yields the same output.

1. No browser-time animation. These are forbidden because they are not frame-deterministic and will

flicker or drop out when rendered:

• CSS transition, CSS animation, @keyframes
• Tailwind animate-* utility classes
• setTimeout, setInterval, requestAnimationFrame, Date.now(), performance.now()
• useState + useEffect timers that advance the animation
• animation libraries that run on wall-clock time (e.g. framer-motion's time-based animate)

1. Map ranges with interpolate. For linear/eased mapping call interpolate with four positional

arguments in this exact order: interpolate(frame, inputRange, outputRange, options?). The input and output ranges are plain arrays. Never use an object-configuration form.

1. Clamp the edges. interpolate extrapolates by default ('extend'), so values run past the range.

Stop that with the options object keys extrapolateLeft and extrapolateRight set to the string 'clamp'. Use 'clamp' for any value that must not overshoot (opacity, progress 0→1).

1. Springs take one object. Call spring with a single object argument — spring({ frame, fps })

— never positionally. Tune physics through a nested config object using only the keys damping, stiffness, mass, and overshootClamping (defaults 10 / 100 / 1 / false). Stretch a spring to a length with durationInFrames; start it late with delay.

1. Work in seconds × fps. Read fps from useVideoConfig() and convert any second-based duration to

frames by multiplying by fps (e.g. 1.5 * fps). Never hard-code milliseconds or a raw frame count that assumes a fixed fps.

1. Ease through the option, not CSS. Apply easing via the easing key of interpolate's options

object using the Easing module (imported from remotion): compose a convexity with a curve, e.g. Easing.inOut(Easing.quad), or Easing.bezier(0.8, 0.22, 0.96, 0.65). Never a CSS timing-function string.

1. Delay by offsetting the frame. To start an element's motion later, subtract frames from the input

(frame - delayInFrames) or pass delay to spring — do not schedule with a timer or CSS delay.

Worked examples

Fade — CSS transition → frame-driven interpolate

tsx
// BEFORE (does not render): <div style={{ opacity: 1, transition: "opacity 2s" }}>Welcome</div>
// AFTER
import { useCurrentFrame, useVideoConfig, interpolate } from "remotion";
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const opacity = interpolate(frame, [0, 2 * fps], [0, 1], { extrapolateRight: "clamp" });
return <div style={{ opacity }}>Welcome</div>;

Pop — framer-motion → spring

tsx
// BEFORE: <motion.div animate={{ scale: 1 }} transition={{ type: "spring" }} />
// AFTER
import { spring, useCurrentFrame, useVideoConfig } from "remotion";
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const scale = spring({ frame, fps, config: { damping: 12, stiffness: 200 } });
return <div style={{ transform: `scale(${scale})` }} />;

interpolate signature — object form → four positional args

tsx
// BEFORE (wrong shape): interpolate({ value: frame, inputRange: [0, 30], outputRange: [0, 100] })
// AFTER
const x = interpolate(frame, [0, 30], [0, 100], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });

Delay — setTimeout → frame offset

tsx
// BEFORE: setTimeout(() => setShown(true), 500)
// AFTER
const appear = spring({ frame: frame - 0.5 * fps, fps });

Easing — CSS timing string → Easing module

tsx
// BEFORE: style={{ transition: "left 1s cubic-bezier(0.8,0.22,0.96,0.65)" }}
// AFTER
import { interpolate, Easing } from "remotion";
const left = interpolate(frame, [0, fps], [0, 200], {
  easing: Easing.inOut(Easing.quad),
  extrapolateRight: "clamp",
});

Edge cases & exceptions

• Static styles are fine. Colors, borders, and layout that do not change over time need no frame math.
• Inside a <Sequence>, useCurrentFrame() is local (starts at 0 when the sequence begins) — build the

animation against that local frame; do not add the sequence's from back in.

• Springs output ~0→1 — map them to a real range by feeding the spring value into interpolate (e.g.

rotation interpolate(s, [0, 1], [0, 360])).

• Third-party canvas/WebGL (Three.js, Lottie) still advances off useCurrentFrame() — drive its

progress prop from the frame, never off its own internal clock.

Do / Don't

• Do compute animated styles from useCurrentFrame(). Don't use CSS transition/@keyframes.
• Do call interpolate(frame, inRange, outRange, opts) with four positional args. Don't pass an

options/config object as the only argument.

• Do clamp with extrapolateRight: 'clamp'. Don't leave a bounded value on the default 'extend'.
• Do call spring({ frame, fps }). Don't call spring(frame, fps) positionally.
• Do derive durations as seconds * fps. Don't hard-code milliseconds or assume 30fps.
• Do ease via Easing.inOut(Easing.quad). Don't use a CSS cubic-bezier() timing string.

Common mistakes

• Reaching for CSS transitions / Tailwind animate-* out of React habit — they render blank or flicker.
• Writing interpolate in an object-config form instead of the four positional arguments.
• Forgetting to clamp, so opacity/progress shoots past 1 or below 0 outside the range.
• Calling spring positionally, or inventing config keys instead of damping/stiffness/mass.
• Timing in milliseconds (frame / 30, * 1000) instead of seconds * fps from useVideoConfig().
• Using setTimeout/requestAnimationFrame/Date.now() to sequence motion.

Quick checklist

• ] Every animated value is a function of useCurrentFrame().
• ] interpolate(frame, inputRange, outputRange, options) — four positional args, arrays for ranges.
• ] Bounded values clamped with extrapolateLeft/extrapolateRight: 'clamp'.
• ] spring({ frame, fps, config: { damping, stiffness, mass } }) — single object.
• ] Durations are seconds * fps with fps from useVideoConfig().
• ] Easing via Easing.* in the easing option; no CSS transitions/timers.