Remotion Animated

To use standard timing functions in Animated components, import and use the Ease collection from remotion-animated. This collection provides pre-defined easing functions like Ease.Linear, Ease.QuadraticIn, etc., which are directly compatible with the ease prop of animation functions.

import { Ease } from 'remotion-animated';

// Example usage in an animation function
Move({ y: 40, ease: Ease.Linear });

Choosing between Size and Scale depends on how you want the children of the animated element to behave:

• Use Size if you only want to change the dimensions of the container. The children will reflow or reposition according to the new container size, but their own visual scale remains unchanged.
• Use Scale if you want to animate the container and the visual scale of its children simultaneously (e.g., making a box and the text inside it appear smaller via a CSS transform).

When multiple Move animations are provided in the animations array, their translations are cumulative. If an element is moved by one Move animation, subsequent Move animations will apply their offsets relative to the resulting position, effectively combining the total translation at the end of the sequence.

You can control when each animation starts using the start property (inherited from standard animation options).

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

Remotion Animated allows you to specify animations declaratively within your Remotion JSX. It simplifies animation creation by:

1. Moving animation logic directly into JSX using the <Animated /> component.
2. Providing high-quality default animation settings.
3. Enabling easy chaining of multiple timed animations.

Instead of manually calculating frame offsets and interpolation values, you wrap your elements in an <Animated /> component and pass an array of animation instructions.

The Size animation modifies the width or height of an element's container. This is useful when you want to change the layout dimensions of a container without affecting the visual scale of its children (e.g., text inside a box will not stretch or squash, it will simply reflow as the box grows or shrinks).

To use it, pass a Size animation object into the animations array of the <Animated /> component.

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

const Example = () => (
  <Animated animations={[Size({ width: 300 })]}>
    <h1>Example text</h1>
  </Animated>
);

The Rotate animation rotates an element clockwise along the Z-axis (2D) or along the X and Y axes (3D). To use it, wrap your component in the Animated component and pass the Rotate animation to the animations prop.

Note on 3D Rotation: For degreesX or degreesY to be visually effective, the parent element must have a CSS perspective property set.

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

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

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