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

> Learn to use interpolation and animation in Remotion. Map time to CSS properties with easing, springs, and color transitions for frame-accurate video. Get started today with this guide.

- Repository: [Remotion/remotion](https://github.com/remotion-dev/remotion)
- Tags: how-to-guide
- Published: 2026-02-16

---

**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`](https://github.com/remotion-dev/remotion/blob/main/packages/core/src/interpolate.ts) and [`packages/core/src/spring/index.ts`](https://github.com/remotion-dev/remotion/blob/main/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`](https://github.com/remotion-dev/remotion/blob/main/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

```typescript
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`](https://github.com/remotion-dev/remotion/blob/main/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.

```typescript
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`](https://github.com/remotion-dev/remotion/blob/main/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.

```typescript
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`](https://github.com/remotion-dev/remotion/blob/main/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.

```typescript
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`](https://github.com/remotion-dev/remotion/blob/main/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`](https://github.com/remotion-dev/remotion/blob/main/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`](https://github.com/remotion-dev/remotion/blob/main/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`](https://github.com/remotion-dev/remotion/blob/main/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`](https://github.com/remotion-dev/remotion/blob/main/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`](https://github.com/remotion-dev/remotion/blob/main/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`](https://github.com/remotion-dev/remotion/blob/main/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.