Move

The Move animation translates an element horizontally, vertically or both.

Usage

The following example animates the text inside down by 80 pixels and left by 20 pixels.

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

const Example = () => (
  <Animated animations={[Move({ x: -20, y: 80 })]}>
    <h1>Example text</h1>
  </Animated>
);

Move options

x?: number

The element will be moved to the right by this amount (in pixels).

y?: number

The element will be moved down by this amount (in pixels).

initialX?: number

The x position offset that is used at the start of the animation (in pixels). Defaults to 0.

initialY?: number

The y position offset that is used at the start of the animation (in pixels). 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.

Combining

If the element has already been moved by another Move animation, the element will have the combined translations of each animation in the end.

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

const Example = () => (
  <Animated
    animations={[
      Move({ x: 20, y: 80 }),
      Move({ x: 20, y: -80, start: 20 }),
      Move({ x: 40, start: 40 }),
    ]}
  >
    <h1>Example text</h1>
  </Animated>
);

In this example, the text element will have moved to the right by 80 pixels and returned to its original y position by the end of all animations.