--- 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 `` to display a GIF, APNG, AVIF or WebP image synchronized with Remotion's timeline: ```tsx import {AnimatedImage, staticFile} from 'remotion'; export const MyComposition = () => { return ; }; ``` Remote URLs are also supported (must have CORS enabled): ```tsx ``` ## Sizing and fit Control how the image fills its container with the `fit` prop: ```tsx // Stretch to fill (default) // Maintain aspect ratio, fit inside container // Fill container, crop if needed ``` ## Playback speed Use `playbackRate` to control the animation speed: ```tsx {/* 2x speed */} {/* Half speed */} ``` ## Looping behavior Control what happens when the animation finishes: ```tsx // Loop indefinitely (default) // Play once, show final frame // Play once, then clear canvas ``` ## Styling Use the `style` prop for additional CSS (use `width` and `height` props for sizing): ```tsx ``` ## 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 `` does not work (only supported in Chrome and Firefox), you can use `` 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 ; }; ``` The `` component has the same props as `` but only supports GIF files.