Chapter 174: <AnimatedImage>

Core Idea

Renders an animated GIF, PNG, 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.

Key Concepts

• Props
• src
• effects?<AvailableFrom v="4.0.464" />
• width?
• height?
• fit?
• style?
• cropLeft?<AvailableFrom v="4.0.500" />

Code Examples

export const WebpAnimatedImage = () => {
  return <AnimatedImage src="https://mathiasbynens.be/demo/animated-webp-supported.webp" />;
};

• What it demonstrates: Usage pattern for <AnimatedImage> from the official docs.

Key Takeaways

1. Understand props when working with <AnimatedImage>.
2. Understand src when working with <AnimatedImage>.
3. Understand effects?<availablefrom v="4.0.464" /> when working with <AnimatedImage>.
4. Understand width? when working with <AnimatedImage>.
5. Understand height? when working with <AnimatedImage>.

Connects To

• Delaying: related page in the Assets & Media section.
• Exporting: related page in the Assets & Media section.
• From Video: related page in the Assets & Media section.