Skip to main content


The Rotate animation rotates an element along the Z-axis.


The following example rotates the text by 180 degrees.

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

const Example = () => (
<Animated animations={[Rotate({ degrees: 180 })]}>
<h1>Example text</h1>

Rotation options

degrees?: number

The element will be rotated clockwise by this angle.


  • 360 means the element will do one full clockwise rotation.
  • 0 means the element will not rotate.
  • -360 means the element will do one full counter-clockwise rotation.

initial?: number

The proportional rotation angle that is used at the start of the animation. Defaults to 0.

Animation options

start?: number

Frame at which the animation should start. Defaults to 0.

Initial values aren't applied before the start frame.
  • If you want to hide the element before the animation starts, use the in prop on the<Animated> component to set the in frame for the entire animation.
  • If you want the animated property to have a different initial value, you may change it beforehand using your own styling.

Spring options

In addition, all options from Remotion's SpringConfig can be provided as options.

You can also stretch the duration of the spring animation to a certain number of frames:

Remotion Animated provides a default smooth spring animation out-of-the-box, if not overwritten by these values.


By default, the element is rotated from the middle, as this animation uses the transform property. To change this, set the transform-origin using your custom styling.