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.

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.

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.