Chapter 202: <Gif>

Core Idea

Part of the @remotion/gif package

Key Concepts

• Props
• src
• width
• height
• fit
• effects?<AvailableFrom v="4.0.464" />
• onLoad
• style

Code Examples

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

• What it demonstrates: Usage pattern for <Gif> from the official docs.

Key Takeaways

1. Understand props when working with <Gif>.
2. Understand src when working with <Gif>.
3. Understand width when working with <Gif>.
4. Understand height when working with <Gif>.
5. Understand fit when working with <Gif>.

Connects To

• Animatedimage: related page in the Assets & Media section.
• Delaying: related page in the Assets & Media section.
• Exporting: related page in the Assets & Media section.