@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.

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"
    />
  );
};

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