Skip to main content

Scale

The Scale animation scales an element horizontally, vertically or both, using a transform.

Usage​

The following example scales the text by the factor 1.5.

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

const Example = () => (
  <Animated animations={[Scale({ by: 1.5 })]}>
    <h1>Example text</h1>
  </Animated>
);

Scale options​

by?: number​

The element will be proportionately scaled up or down by this factor.

Examples:​

  • 1 means the element will stay the same size.
  • 2 means the element will scale up to be twice as big.
  • 0.5 means the element will scale down to be half as big.

x?: number​

The element will be scaled up or down horizontally by this factor.

y?: number​

The element will be scaled up or down vertically by this factor.

initial?: number​

The proportional scale factor that is used at the start of the animation. Defaults to 1.

initialX?: number​

The x scale factor that is used at the start of the animation. Defaults to the value of initial.

initialY?: number​

The y scale factor that is used at the start of the animation. Defaults to the value of initial.

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.

Origin​

By default, the element is scaled from the middle, as this animation uses the transform property. To change this, set the transform-origin using your custom styling.