Skip to main content

Concept

The idea behind Remotion Animated is to simplify and speed 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.