1---
2name: gif
3description: Displaying GIFs, APNG, AVIF and WebP in Remotion
4metadata:
5  tags: gif, animation, images, animated, apng, avif, webp
6---
7 
8# Using Animated images in Remotion
9 
10## Basic usage
11 
12Use `<AnimatedImage>` to display a GIF, APNG, AVIF or WebP image synchronized with Remotion's timeline:
13 
14```tsx
15import { AnimatedImage, staticFile } from "remotion";
16 
17export const MyComposition = () => {
18  return (
19    <AnimatedImage src={staticFile("animation.gif")} width={500} height={500} />
20  );
21};
22```
23 
24Remote URLs are also supported (must have CORS enabled):
25 
26```tsx
27<AnimatedImage
28  src="https://example.com/animation.gif"
29  width={500}
30  height={500}
31/>
32```
33 
34## Sizing and fit
35 
36Control how the image fills its container with the `fit` prop:
37 
38```tsx
39// Stretch to fill (default)
40<AnimatedImage src={staticFile("animation.gif")} width={500} height={300} fit="fill" />
41 
42// Maintain aspect ratio, fit inside container
43<AnimatedImage src={staticFile("animation.gif")} width={500} height={300} fit="contain" />
44 
45// Fill container, crop if needed
46<AnimatedImage src={staticFile("animation.gif")} width={500} height={300} fit="cover" />
47```
48 
49## Playback speed
50 
51Use `playbackRate` to control the animation speed:
52 
53```tsx
54<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} playbackRate={2} /> {/* 2x speed */}
55<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} playbackRate={0.5} /> {/* Half speed */}
56```
57 
58## Looping behavior
59 
60Control what happens when the animation finishes:
61 
62```tsx
63// Loop indefinitely (default)
64<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} loopBehavior="loop" />
65 
66// Play once, show final frame
67<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} loopBehavior="pause-after-finish" />
68 
69// Play once, then clear canvas
70<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} loopBehavior="clear-after-finish" />
71```
72 
73## Styling
74 
75Use the `style` prop for additional CSS (use `width` and `height` props for sizing):
76 
77```tsx
78<AnimatedImage
79  src={staticFile("animation.gif")}
80  width={500}
81  height={500}
82  style={{
83    borderRadius: 20,
84    position: "absolute",
85    top: 100,
86    left: 50,
87  }}
88/>
89```
90 
91## Getting GIF duration
92 
93Use `getGifDurationInSeconds()` from `@remotion/gif` to get the duration of a GIF.
94 
95```bash
96npx remotion add @remotion/gif
97```
98 
99```tsx
100import { getGifDurationInSeconds } from "@remotion/gif";
101import { staticFile } from "remotion";
102 
103const duration = await getGifDurationInSeconds(staticFile("animation.gif"));
104console.log(duration); // e.g. 2.5
105```
106 
107This is useful for setting the composition duration to match the GIF:
108 
109```tsx
110import { getGifDurationInSeconds } from "@remotion/gif";
111import { staticFile, CalculateMetadataFunction } from "remotion";
112 
113const calculateMetadata: CalculateMetadataFunction = async () => {
114  const duration = await getGifDurationInSeconds(staticFile("animation.gif"));
115  return {
116    durationInFrames: Math.ceil(duration * 30),
117  };
118};
119```
120 
121## Alternative
122 
123If `<AnimatedImage>` does not work (only supported in Chrome and Firefox), you can use `<Gif>` from `@remotion/gif` instead.
124 
125```bash
126npx remotion add @remotion/gif # If project uses npm
127bunx remotion add @remotion/gif # If project uses bun
128yarn remotion add @remotion/gif # If project uses yarn
129pnpm exec remotion add @remotion/gif # If project uses pnpm
130```
131 
132```tsx
133import { Gif } from "@remotion/gif";
134import { staticFile } from "remotion";
135 
136export const MyComposition = () => {
137  return <Gif src={staticFile("animation.gif")} width={500} height={500} />;
138};
139```
140 
141The `<Gif>` component has the same props as `<AnimatedImage>` but only supports GIF files.
142