Skip to main content

fade()

A simple fade animation. The incoming slide fades in over the outgoing slide, while the outgoing slide does not change. Works only if the incoming slide is fully opaque.

Example​

FadeTransition.tsx
import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { fade } from "@remotion/transitions/fade";

const BasicTransition = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={40}>
        <Letter color="#0b84f3">A</Letter>
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        presentation={fade()}
        timing={linearTiming({ durationInFrames: 30 })}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

API​

An object which takes:

enterStyle?v4.0.84​

The style of the container element when the scene is entering.

exitStyle?v4.0.84​

The style of the container element when the scene is exiting.

shouldFadeOutExitingScene?v4.0.166​

Whether the exiting scene should fade out or not. Default false.

note

The default is false because if both the entering and existing scene are semi-opaque, the whole scene will be semi-opaque, which will make the content underneath shine though.
We recommend for transitioning between fully opaque scenes setting this to false.
If the scenes are not fully covered (like fading between overlays), we recommend setting this to false.

Compatibility​

BrowsersEnvironments
Chrome
Firefox
Safari

See also​