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.