Guides
Transitions
Scene-to-scene fades with TransitionSeries.
Install the fade helper and transitions package:
Install
Install
$ npx remotion-ui@latest add transition-fadeRemotion package
$ npx remotion add @remotion/transitionsUse transitionFade() with TransitionSeries:
Example
import { TransitionSeries } from "@remotion/transitions";
import {
transitionFade,
getTransitionFadeDuration,
} from "@/remotion/primitives/transition-fade";
const fade = transitionFade({ durationInFrames: 15 });
const fadeSpring = transitionFade({ variant: "spring", durationInFrames: 20 });
<TransitionSeries>
<TransitionSeries.Sequence durationInFrames={60}>
<TitleCard title="Hello" />
</TransitionSeries.Sequence>
<TransitionSeries.Transition {...fade} />
<TransitionSeries.Sequence durationInFrames={90}>
<FeatureList items={["One", "Two"]} />
</TransitionSeries.Sequence>
</TransitionSeries>Duration math
Transitions overlap adjacent scenes, so total duration is shorter than the sum of sequence durations:
Duration
const total =
scene1 + scene2 - getTransitionFadeDuration({ durationInFrames: 15 }, 30);
// 60 + 60 - 15 = 105 framesFor slide transitions, use transition-slide:
Slide
import { transitionSlide } from "@/remotion/primitives/transition-slide";
<TransitionSeries.Transition
{...transitionSlide({ direction: "from-left" })}
/>See the Showcase composition for a full multi-scene example.