Fade

The Fade animation animates the opacity of an element.

Usage

The following example fades the element in after 20 frames and fades it out after 60 frames.

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

const Example = () => (
  <Animated
    animations={[
      Fade({ to: 1, initial: 0, start: 20 }),
      Fade({ to: 0, start: 60 }),
    ]}
  >
    <h1>Example text</h1>
  </Animated>
);

Fade options

to?: number

The element's opacity will be animated to this value.

Examples:

• 0 means the element will become fully invisible.
• 1 means the element will become fully opaque.

initial?: number

The opacity that is used at the start of the animation. Defaults to 1.

note

To achieve a fade in animation, set initial 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.