What is keyframing & deterministic interpolation?

Motion Fundamentals

Keyframing & deterministic interpolation

Also searched as: keyframe, keyframing, in-betweening, frame interpolation, deterministic motion

Canonical Definition

A keyframe marks a specific property value at a designated point in time, allowing software to calculate all intermediate states (in-betweens) through deterministic mathematical interpolation.

Easing Curve

Clamp both left and right extrapolations to prevent out-of-bounds visual values.

In traditional hand-drawn animation, lead animators drew 'key' poses and junior artists filled in the 'in-betweens'. In GUI video editors (After Effects, Premiere), users place keyframe diamonds along a timeline.

In code-based video (Remotion), keyframes are expressed as pure functions of the current frame number (`interpolate(frame, [0, 30], [0, 100])`). This makes rendering 100% deterministic and distributed: any machine in a cloud cluster can render frame 450 without needing to simulate frames 0 through 449.

The Pure Function Model of Motion

Mapping discrete input ranges to continuous visual outputs

Remotion replaces mutable timeline state with pure functional transformations. Given the same frame number and props, a Remotion component always outputs the exact same DOM tree.

InterpolateExample.tsxtsx

import { interpolate, useCurrentFrame } from "remotion";

export const FadeSlide = ({ children }: { children: React.ReactNode }) => {
  const frame = useCurrentFrame();

  const opacity = interpolate(frame, [0, 15], [0, 1], { extrapolateRight: "clamp" });
  const translateY = interpolate(frame, [0, 20], [40, 0], {
    easing: (t) => Math.sin((t * Math.PI) / 2),
    extrapolateRight: "clamp",
  });

  return <div style={{ opacity, transform: `translateY(${translateY}px)` }}>{children}</div>;
};

Engineering Guidelines & Common Pitfalls

Best Practices (What to do)

Use descriptive keyframe ranges tied to named beats or constants rather than magic frame numbers.

Common Failure Modes (What to avoid)

Forgetting `{ extrapolateRight: 'clamp' }`: without clamping, values continue flying off into infinity after the keyframe duration.

Generate with AI

Build keyframing & deterministic interpolation 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