Skip to main content

How it works

Remotion Animated lets you declaratively specify animations in Remotion. It simplifies and speeds up the creation of simple animations in your Remotion projects, by:

  • Moving the animation logic fully into the JSX, using the <Animated /> component;
  • Providing defaults that make animations look great out-of-the-box;
  • Making it easy to chain multiple timed animations.

Example usage​

To animate something, use the <Animated> component around the elements you'd like to animate.

import { Animated, Move } from 'remotion-animated';

const ExampleComposition = () => (
  <Animated animations={[Move({ x: 200 })]}>
    <HelloWorld />
  </Animated>
);

Example video from homepage​

The example demo video from the homepage of this website is made using Remotion Animated. You can take a look at the source code.