Rotate

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

Usage

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>
  </Animated>
);

Rotation options

degrees?: number

The element will be rotated clockwise by this angle.

Examples:

• 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.

• mass: number
• damping: number
• stiffness: number
• overshootClamping: boolean

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

• duration: number

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

Origin

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.