Skip to main content

Rotate

The Rotate animation rotates an element clockwise along the Z-axis. It can also rotate in 3D space clockwise along the x and y axes.

Usage​

The following example rotates the text by 180 degrees in 2D space.

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

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

3D rotation​

The following example rotates the text by 180 degrees in 3D space along the x-axis.

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

const Example = () => (
  <div style={{ perspective: '1200px' }}>
    <Animated animations={[Rotate({ degreesX: 180 })]}>
      <h1>Example text</h1>
    </Animated>
  </div>
);

Rotation options​

degrees?: number​

The element will be rotated clockwise by this angle along the z-axis (normal rotation in 2D space).

degreesX?: number​

The element will be rotated in 3D space clockwise by this angle in the x-axis.

This affects the element's rotation in 3D space, which will be visible if the element has a perspective.

degreesY?: number​

The element will be rotated in 3D space clockwise by this angle in the y-axis.

This affects the element's rotation in 3D space, which will be visible if the element has a perspective.

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.

duration?: number​

Number of frames for which the animation is stretched. Can be set for both spring and bezier easing animations. Defaults to 15 frames for custom easing functions.

ease?: EasingBehaviour​

You can provide a custom easing behaviour here instead of the spring properties. This will override the spring animation. Read more about easing in the Easing section.

Spring options​

All options from Remotion's SpringConfig can be provided as options for spring animations.

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.