Skip to main content


The Fade animation animates the opacity of an element.


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 = () => (
Fade({ to: 1, initial: 0, start: 20 }),
Fade({ to: 0, start: 60 }),
<h1>Example text</h1>

Fade options

to?: number

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


  • 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.


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 fade animation runs. Defaults to 15 frames.