87671ce026
Imported official Remotion skill for video creation in React: - 28 modular rule files covering animations, audio, video, captions, 3D, etc. - Added author (remotion-dev) and version (1.0) metadata - Updated skill count: 224 → 225 - Regenerated skills_index.json Source: https://github.com/remotion-dev/skills
139 lines
3.8 KiB
Markdown
139 lines
3.8 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 # 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 {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.
|