RemotionUI

Install the fade helper and transitions package:

npx remotion-ui add transition-fade
npx remotion add @remotion/transitions

Use transitionFade() with TransitionSeries:

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:

const total =
  scene1 + scene2 - getTransitionFadeDuration({ durationInFrames: 15 }, 30);
// 60 + 60 - 15 = 105 frames

For slide transitions, use transition-slide:

import { transitionSlide } from "@/remotion/primitives/transition-slide";

<TransitionSeries.Transition
  {...transitionSlide({ direction: "from-left" })}
/>

See the Showcase composition for a full multi-scene example.

Transitions

Duration math

On this page