Skip to main content

Size

The Size animation changes the width or height of an element.

Usage

The following example changes the width to 300 pixels.

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

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

Size options

width?: number

The element's width will be animated to this value, if set.

height?: number

The element's height will be animated to this value, if set.

initialWidth?: number

The width that is used at the start of the animation. Defaults to 0.

initialHeight?: number

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

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

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

Size vs. Scale

The Size animation will only change the width and height of the container, while the Scale animation scales all of its contents using a transform.

  • If you only want to animate the size of container, you should use Size.
  • If you only want to animate the container and the scale of its children (e.g. making the container and the text within it smaller), you should use Scale.