Using Animated images in Remotion

Basic usage

Use `` to display a GIF, APNG, AVIF or WebP image synchronized with Remotion's timeline:

  return ;
};

Remote URLs are also supported (must have CORS enabled):

Sizing and fit

Control how the image fills its container with the fit prop:

// Stretch to fill (default)

// Maintain aspect ratio, fit inside container

// Fill container, crop if needed

Playback speed

Use playbackRate to control the animation speed:

Looping behavior

Control what happens when the animation finishes:

// Loop indefinitely (default)

// Play once, show final frame

// Play once, then clear canvas

Styling

Use the style prop for additional CSS (use width and height props for sizing):

Getting GIF duration

Use getGifDurationInSeconds() from @remotion/gif to get the duration of a GIF.

npx remotion add @remotion/gif # If project uses npm
bunx remotion add @remotion/gif # If project uses bun
yarn remotion add @remotion/gif # If project uses yarn
pnpm exec remotion add @remotion/gif # If project uses pnpm

const duration = await getGifDurationInSeconds(staticFile('animation.gif'));
console.log(duration); // e.g. 2.5

This is useful for setting the composition duration to match the GIF:

const calculateMetadata: CalculateMetadataFunction = async () => {
  const duration = await getGifDurationInSeconds(staticFile('animation.gif'));
  return {
    durationInFrames: Math.ceil(duration * 30),
  };
};

Alternative

If does not work (only supported in Chrome and Firefox), you can use from @remotion/gif instead.

npx remotion add @remotion/gif # If project uses npm
bunx remotion add @remotion/gif # If project uses bun
yarn remotion add @remotion/gif # If project uses yarn
pnpm exec remotion add @remotion/gif # If project uses pnpm

  return ;
};

The component has the same props as but only supports GIF files.