Skip to main content

<AnimatedImage>v4.0.246

Renders an animated GIF, AVIF or WebP image and syncs it with Remotion's timeline.
Relies on the ImageDecoder Web API, meaning it only works in Google Chrome and Firefox as of writing.

Loading a remote animated image
tsx
import {AnimatedImage} from 'remotion';
 
export const WebpAnimatedImage = () => {
  return (
    <AnimatedImage src="https://mathiasbynens.be/demo/animated-webp-supported.webp" />
  );
};
Loading a remote animated image
tsx
import {AnimatedImage} from 'remotion';
 
export const WebpAnimatedImage = () => {
  return (
    <AnimatedImage src="https://mathiasbynens.be/demo/animated-webp-supported.webp" />
  );
};
Loading a local animated image
tsx
import {AnimatedImage, staticFile} from 'remotion';
 
export const GifAnimatedImage = () => {
  return <AnimatedImage src={staticFile('giphy.gif')} />;
};
Loading a local animated image
tsx
import {AnimatedImage, staticFile} from 'remotion';
 
export const GifAnimatedImage = () => {
  return <AnimatedImage src={staticFile('giphy.gif')} />;
};

Props​

src​

The URL of the animated image. Can be a remote URL or a local file path.

note

Remote images need to support CORS.

More info

width?​

The display width.

height?​

The display height.

fit?​

Must be one of these values:

  • 'fill': The image will completely fill the container, and will be stretched if necessary. (default)
  • 'contain': The image is scaled to fit the box, while aspect ratio is maintained.
  • 'cover': The image completely fills the container and maintains it's aspect ratio. It will be cropped if necessary.

style?​

Allows to pass in custom CSS styles. You may not pass width and height, instead use the props width and height to set the size of the image.

loopBehavior?​

The looping behavior of the animated image. Can be one of these values:

  • 'loop': The animated image will loop infinitely. (default)
  • 'pause-after-finish': The animated image will play once and then show the last frame.
  • 'clear-after-finish': The animated image will play once and then clear the canvas.

ref?v3.3.88​

You can add a React ref to <AnimatedImage />. If you use TypeScript, you need to type it with HTMLCanvasElement.

Differences to <Gif>​

  • <AnimatedImage> also supports AVIF and WebP images.
  • <AnimatedImage> uses the ImageDecoder Web API, which has limited browser support.
  • <AnimatedImage> does not support the onLoad prop.

See also​