Skip to main content

<Gif>

Part of the @remotion/gif package

Displays a GIF that synchronizes with Remotions useCurrentFrame().

import {Gif} from '@remotion/gif';

export const MyComponent: React.FC = () => {
  const {width, height} = useVideoConfig();
  const ref = useRef<HTMLCanvasElement>(null);

  return (
    <Gif
      ref={ref}
      src="https://media.giphy.com/media/3o72F7YT6s0EMFI0Za/giphy.gif"
      width={width}
      height={height}
      fit="fill"
      playbackRate={2}
    />
  );
};

Props​

src​

The source of the GIF. Can be an URL or a local image - see Importing assets.

note

Remote GIFs need to support CORS.

More info

width​

The display width.

height​

The display height.

fit​

Must be one of these values:

  • 'fill': The GIF will completely fill the container, and will be stretched if necessary. (default)
  • 'contain': The GIF is scaled to fit the box, while aspect ratio is maintained.
  • 'cover': The GIF completely fills the container and maintains it's aspect ratio. It will be cropped if necessary.

effects?v4.0.464​

Apply effects to each GIF frame after it has been drawn to the canvas.

onLoad​

Callback that gets called once the GIF has loaded and finished processing. As its only argument, the callback gives the following object:

  • width: Width of the GIF file in pixels.
  • height: Height of the GIF file in pixels.
  • delays: Array of timestamps of type number containing position of each frame.
  • frames: Array of frames of type ImageData

style​

Allows to pass in custom CSS styles. You may not pass width and height, instead use the props width and height to set the size of the GIF.

cropLeft?v4.0.500​

Crops the canvas from the left by a ratio between 0 and 1. See cropLeft on <Sequence>.

cropRight?v4.0.500​

Crops the canvas from the right by a ratio between 0 and 1. See cropRight on <Sequence>.

cropTop?v4.0.500​

Crops the canvas from the top by a ratio between 0 and 1. See cropTop on <Sequence>.

cropBottom?v4.0.500​

Crops the canvas from the bottom by a ratio between 0 and 1. See cropBottom on <Sequence>.

premountFor?v4.0.497​

Mounts the canvas for the specified number of frames before its from frame. The canvas carries display: none and is frozen at its first frame while premounted.

Use this prop to let the GIF load, parse, and initialize its frame cache before it becomes visible. See Premounting.

postmountFor?v4.0.497​

Keeps the canvas mounted for the specified number of frames after its duration has ended. The canvas is invisible and frozen at its final frame while postmounted.

styleWhilePremounted?v4.0.497​

CSS styles applied to the canvas while it is premounted. These styles override the default display: none and pointer-events: none styles.

styleWhilePostmounted?v4.0.497​

CSS styles applied to the canvas while it is postmounted. These styles override the default display: none and pointer-events: none styles.

loopBehaviorv3.3.4​

The looping behavior of the GIF. Can be one of these values:

  • 'loop': The GIF will loop infinitely. (default)
  • 'pause-after-finish': The GIF will play once and then show the last frame.
  • 'unmount-after-finish': The GIF will play once and then unmount. Note that if you attach a ref, it will become null after the GIF has finished playing.

refv3.3.88​

You can add a React ref to <Gif>. If you use TypeScript, you need to type it with HTMLCanvasElement.

playbackRatev4.0.44​

The playbackRate prop controls the playback speed of the GIF animation within your Remotion video. It enables you to adjust how fast or slow the GIF animation plays, allowing for precise synchronization with your video content.

Default: 1 (Normal speed) Values:

  • 1: Plays the GIF at normal speed.
  • < 1: Slows down the GIF speed (e.g., 0.5 plays it at half speed).
  • > 1: Speeds up the GIF speed (e.g., 2.0 plays it at double speed).

delayRenderTimeoutInMilliseconds?v4.0.403​

Modifies the timeout of the internal delayRender() call when loading the GIF. By default, Remotion will wait 30 seconds for the GIF to load before timing out. You can increase or decrease this timeout by passing a custom value.

See: Modifying the timeout

<Gif
  src="https://example.com/large-gif.gif"
  delayRenderTimeoutInMilliseconds={60000} // 60 seconds
/>

requestInit?v4.0.471​

Options that are passed to the internal fetch() call when loading the GIF. This can be used to pass credentials or headers for authenticated GIFs.

Remotion manages the internal signal option itself, so passing a signal in requestInit has no effect.

<Gif
  src="https://example.com/authenticated-gif.gif"
  requestInit={{
    credentials: 'include',
  }}
/>

Differences to <AnimatedImage>​

  • <Gif> does not support animated AVIF and WebP images.
  • <Gif> works in Safari as well since it uses a JavaScript-based GIF decoder.
  • <Gif> supports the onLoad prop.

See also​