Skip to main content

Scale

The Scale animation scales an element horizontally, vertically or both, using a transform. It can also scale in 3D space along the z-axis.

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 in the x and y axes.

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.

z?: number​

The element will be scaled in 3D space up or down along the z-axis by this factor.

This affects the element's scale in 3D space, which will be visible if the element has a perspective.

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.

initialZ?: number​

The z scale factor that is used at the start of the animation.

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.

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.