How to Use Interpolation and Animation in Remotion: A Complete Guide

Remotion enables frame-accurate video animations through the interpolate function and useCurrentFrame hook, allowing you to map time values to CSS properties with support for easing functions, physics-based springs, and color transitions.

Interpolation and animation in Remotion form the foundation of programmatic video generation within the remotion-dev/remotion repository. By leveraging the core APIs exposed in packages/core/src/interpolate.ts and packages/core/src/spring/index.ts, developers can create smooth motion graphics that render consistently across every frame of the output video.

Understanding the Core interpolate API

The interpolate function, defined in packages/core/src/interpolate.ts, maps a numeric input value from one range to another. This is the primary mechanism for converting the current frame number into visual properties like opacity, position, or scale.

The function signature accepts:

• Input value: Typically the current frame or derived time value
• Input range: An array defining the start and end values of the input
• Output range: An array defining the corresponding target values
• Options: Optional configuration for easing and extrapolation

Handling Extrapolation Behavior

When the input value falls outside the specified input range, interpolate uses extrapolation settings to determine the output. The available modes, as implemented in the source code, include:

• extend: Continues the interpolation linearly beyond the range (default)
• clamp: Restricts output to the boundaries of the output range
• identity: Returns the input value directly without transformation
• wrap: Wraps the value around the range using modulo arithmetic

Driving Animations with useCurrentFrame

The useCurrentFrame hook provides the current frame number within a Remotion composition. When combined with interpolate, this creates the fundamental animation loop:

1. Retrieve the current frame using useCurrentFrame()
2. Convert frames to seconds if needed: frame / fps
3. Pass the value to interpolate with appropriate ranges
4. Apply the result to component styles

import {AbsoluteFill, interpolate, useCurrentFrame} from 'remotion';

export const FadeIn: React.FC = () => {
  const frame = useCurrentFrame();
  
  // Map frame 0-30 to opacity 0-1
  const opacity = interpolate(frame, [0, 30], [0, 1]);

  return (
    <AbsoluteFill style={{opacity}}>
      <h1>Fading Text</h1>
    </AbsoluteFill>
  );
};

Adding Easing to Interpolation and Animation in Remotion

Linear interpolation produces constant-speed motion. To create natural acceleration and deceleration, Remotion provides the @remotion/easing package, located at packages/easing/src/index.ts. These functions modify the interpolation progress value before it reaches the output calculation.

Common easing functions include easeInQuad, easeOutCubic, and easeInOutBounce. Apply them through the easing option in the interpolate configuration object.

import {AbsoluteFill, interpolate, useCurrentFrame} from 'remotion';
import {easeOutBounce} from '@remotion/easing';

export const Bounce: React.FC = () => {
  const frame = useCurrentFrame();

  const translateY = interpolate(
    frame,
    [0, 30, 90],
    [0, -200, 0],
    {easing: easeOutBounce}
  );

  return (
    <AbsoluteFill style={{transform: `translateY(${translateY}px)`}}>
      <h2>Bouncing Text</h2>
    </AbsoluteFill>
  );
};

Physics-Based Motion with Spring Animations

For physics-driven motion that simulates real-world elasticity, Remotion exposes the spring function in packages/core/src/spring/index.ts. Unlike standard interpolation, springs calculate motion based on physical parameters like stiffness, damping, and mass, producing organic movement that responds to changes dynamically.

The spring function returns a progress value between 0 and 1 (or custom range) that you can feed into interpolate to drive rotation, scale, or position changes.

import {AbsoluteFill, interpolate, spring, useCurrentFrame} from 'remotion';

export const SpringBox: React.FC = () => {
  const frame = useCurrentFrame();

  const progress = spring({
    frame,
    fps: 30,
    from: 0,
    to: 1,
    stiffness: 150,
    damping: 20,
  });

  const rotate = interpolate(progress, [0, 1], [0, 360]);

  return (
    <AbsoluteFill style={{justifyContent: 'center', alignItems: 'center'}}>
      <div
        style={{
          width: 150,
          height: 150,
          background: '#61dafb',
          transform: `rotate(${rotate}deg)`,
        }}
      />
    </AbsoluteFill>
  );
};

Color Transitions with interpolateColors

When animating between CSS color values, use the interpolateColors utility from packages/core/src/interpolate-colors.ts. This function extends the core interpolation logic to handle hex codes, RGB, RGBA, and HSL strings, automatically calculating intermediate color values across the animation duration.

import {AbsoluteFill, interpolateColors, useCurrentFrame} from 'remotion';

export const ColorShift: React.FC = () => {
  const frame = useCurrentFrame();

  const background = interpolateColors(
    frame,
    [0, 120],
    ['#ff0000', '#0000ff']
  );

  return (
    <AbsoluteFill style={{backgroundColor: background}}>
      <h3>Color Change</h3>
    </AbsoluteFill>
  );
};

Summary

• The interpolate function in packages/core/src/interpolate.ts maps numeric values across ranges to create frame-accurate animations.
• Use useCurrentFrame to drive animations reactively based on the current playback position.
• Apply easing functions from @remotion/easing (packages/easing/src/index.ts) to create natural acceleration curves.
• Implement physics-based motion using the spring helper in packages/core/src/spring/index.ts for elastic, real-world movement.
• Transition between CSS colors seamlessly with interpolateColors from packages/core/src/interpolate-colors.ts.

Frequently Asked Questions

How does extrapolation work in Remotion's interpolate function?

Extrapolation determines how interpolate handles input values outside the specified input range. The default mode extend continues the interpolation linearly, while clamp restricts output to the output range boundaries. Additional modes include identity, which returns the raw input value, and wrap, which applies modulo arithmetic to cycle values through the range.

What is the difference between using easing functions and spring animations?

Easing functions, located in packages/easing/src/index.ts, modify the interpolation progress mathematically to simulate acceleration curves like ease-in or bounce, but they follow a fixed time duration. Spring animations, implemented in packages/core/src/spring/index.ts, use physics simulation with stiffness, damping, and mass parameters to create organic motion that can overshoot and settle naturally, responding dynamically to parameter changes rather than following a predetermined curve.

Can I animate colors between different formats like hex and rgba?

Yes, the interpolateColors utility in packages/core/src/interpolate-colors.ts automatically handles conversions between hex codes, RGB, RGBA, and HSL color strings. You can specify the input colors in any supported format, and the function calculates intermediate values correctly, returning a CSS-compatible color string for each frame.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}