142 lines
3.6 KiB
Markdown
142 lines
3.6 KiB
Markdown
---
|
|
name: gif
|
|
description: Displaying GIFs, APNG, AVIF and WebP in Remotion
|
|
metadata:
|
|
tags: gif, animation, images, animated, apng, avif, webp
|
|
---
|
|
|
|
# Using Animated images in Remotion
|
|
|
|
## Basic usage
|
|
|
|
Use `<AnimatedImage>` to display a GIF, APNG, AVIF or WebP image synchronized with Remotion's timeline:
|
|
|
|
```tsx
|
|
import { AnimatedImage, staticFile } from "remotion";
|
|
|
|
export const MyComposition = () => {
|
|
return (
|
|
<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} />
|
|
);
|
|
};
|
|
```
|
|
|
|
Remote URLs are also supported (must have CORS enabled):
|
|
|
|
```tsx
|
|
<AnimatedImage
|
|
src="https://example.com/animation.gif"
|
|
width={500}
|
|
height={500}
|
|
/>
|
|
```
|
|
|
|
## Sizing and fit
|
|
|
|
Control how the image fills its container with the `fit` prop:
|
|
|
|
```tsx
|
|
// Stretch to fill (default)
|
|
<AnimatedImage src={staticFile("animation.gif")} width={500} height={300} fit="fill" />
|
|
|
|
// Maintain aspect ratio, fit inside container
|
|
<AnimatedImage src={staticFile("animation.gif")} width={500} height={300} fit="contain" />
|
|
|
|
// Fill container, crop if needed
|
|
<AnimatedImage src={staticFile("animation.gif")} width={500} height={300} fit="cover" />
|
|
```
|
|
|
|
## Playback speed
|
|
|
|
Use `playbackRate` to control the animation speed:
|
|
|
|
```tsx
|
|
<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} playbackRate={2} /> {/* 2x speed */}
|
|
<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} playbackRate={0.5} /> {/* Half speed */}
|
|
```
|
|
|
|
## Looping behavior
|
|
|
|
Control what happens when the animation finishes:
|
|
|
|
```tsx
|
|
// Loop indefinitely (default)
|
|
<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} loopBehavior="loop" />
|
|
|
|
// Play once, show final frame
|
|
<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} loopBehavior="pause-after-finish" />
|
|
|
|
// Play once, then clear canvas
|
|
<AnimatedImage src={staticFile("animation.gif")} width={500} height={500} loopBehavior="clear-after-finish" />
|
|
```
|
|
|
|
## Styling
|
|
|
|
Use the `style` prop for additional CSS (use `width` and `height` props for sizing):
|
|
|
|
```tsx
|
|
<AnimatedImage
|
|
src={staticFile("animation.gif")}
|
|
width={500}
|
|
height={500}
|
|
style={{
|
|
borderRadius: 20,
|
|
position: "absolute",
|
|
top: 100,
|
|
left: 50,
|
|
}}
|
|
/>
|
|
```
|
|
|
|
## Getting GIF duration
|
|
|
|
Use `getGifDurationInSeconds()` from `@remotion/gif` to get the duration of a GIF.
|
|
|
|
```bash
|
|
npx remotion add @remotion/gif
|
|
```
|
|
|
|
```tsx
|
|
import { getGifDurationInSeconds } from "@remotion/gif";
|
|
import { staticFile } from "remotion";
|
|
|
|
const duration = await getGifDurationInSeconds(staticFile("animation.gif"));
|
|
console.log(duration); // e.g. 2.5
|
|
```
|
|
|
|
This is useful for setting the composition duration to match the GIF:
|
|
|
|
```tsx
|
|
import { getGifDurationInSeconds } from "@remotion/gif";
|
|
import { staticFile, CalculateMetadataFunction } from "remotion";
|
|
|
|
const calculateMetadata: CalculateMetadataFunction = async () => {
|
|
const duration = await getGifDurationInSeconds(staticFile("animation.gif"));
|
|
return {
|
|
durationInFrames: Math.ceil(duration * 30),
|
|
};
|
|
};
|
|
```
|
|
|
|
## Alternative
|
|
|
|
If `<AnimatedImage>` does not work (only supported in Chrome and Firefox), you can use `<Gif>` from `@remotion/gif` instead.
|
|
|
|
```bash
|
|
npx remotion add @remotion/gif # If project uses npm
|
|
bunx remotion add @remotion/gif # If project uses bun
|
|
yarn remotion add @remotion/gif # If project uses yarn
|
|
pnpm exec remotion add @remotion/gif # If project uses pnpm
|
|
```
|
|
|
|
```tsx
|
|
import { Gif } from "@remotion/gif";
|
|
import { staticFile } from "remotion";
|
|
|
|
export const MyComposition = () => {
|
|
return <Gif src={staticFile("animation.gif")} width={500} height={500} />;
|
|
};
|
|
```
|
|
|
|
The `<Gif>` component has the same props as `<AnimatedImage>` but only supports GIF files.
|