Remotion GIF

The Remotion GIF package allows you to embed GIFs into a Remotion composition that synchronizes with Remotion's useCurrentFrame()'s hook.

To use this package, we'll be assuming you already have a Remotion project.

Use the same package manager to install this package that you have used to initialize your Remotion project:

npm i @remotion/gif

yarn add @remotion/gif

pnpm i @remotion/gif

Make sure all Remotion packages you install (remotion, @remotion/player, @remotion/gif...) have the same version.

Basic Example

This will render a GIF that fills the whole size of the composition:

import { useVideoConfig } from "remotion";
import { Gif } from "@remotion/gif";
 
export const MyComponent = () => {
  const { width, height } = useVideoConfig();
 
  return (
    <Gif
      src="https://media.giphy.com/media/3o72F7YT6s0EMFI0Za/giphy.gif"
      width={width}
      height={height}
      fit="fill"
    />
  );
};

API

Prop | Function | --- | --- | src | is a required prop, and it is the source of the GIF. It can be a URL or a local image - See how you can import assets.| width | The display width of the GIF height | The display height of the GIF fill | The layout of the GIF in its current container. It accepts the following values: fill, contain, and cover

For a complete reference of the available props, refer to the @remotion/gif documentation.