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.

A
B

Example

FadeTransition.tsx
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>
);
};
FadeTransition.tsx
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

This API has no options.

See also