Skip to main content

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

z?: number​

The element will be moved for- or backward along the z-axis by this amount (in pixels).

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

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.

initialZ?: number​

The z 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.

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.

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.