Transitionsv4.0.59

The <TransitionSeries> component lets you animate between absolutely positioned scenes. Between any two sequences, you can place a <TransitionSeries.Transition> or a <TransitionSeries.Overlay>.

Transitions

A transition animates from one scene to the next. During the transition, both scenes render simultaneously and the total duration is shortened.

import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { slide } from "@remotion/transitions/slide";

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

direction

Enter and exit animations

You can also animate the entrance or exit of a scene by putting a transition first or last in the <TransitionSeries>.

See example

Duration

In the above example, A is visible for 40 frames, B for 60 frames and the duration of the transition is 30 frames. During this time, both slides are rendered. This means the total duration of the animation is 60 + 40 - 30 = 70.

Getting the duration of a transition

You can get the duration of a transition by calling getDurationInFrames() on the timing:

import { springTiming } from "@remotion/transitions";

springTiming({ config: { damping: 200 } }).getDurationInFrames({ fps: 30 }); // 23

Overlaysv4.0.415

An <TransitionSeries.Overlay> renders children on top of the junction between two sequences without shortening the timeline. The sequences remain at full length — the total duration stays the same.

This is useful for effects like light leaks, flashes, or other visual elements that should appear over a cut without affecting timing. The overlay is centered on the cut point by default.

import {LightLeak} from '@remotion/light-leaks';
import {TransitionSeries} from '@remotion/transitions';

const OverlayExample = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="#0b84f3" />
      </TransitionSeries.Sequence>
      <TransitionSeries.Overlay durationInFrames={20}>
        <LightLeak />
      </TransitionSeries.Overlay>
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="pink" />
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};