Skip to main content

​
Fullscreen transitions

Using <TransitionSeries> to animate between multiple scenes or clips.
This will absolutely position the children.

​
Prerequisites

First, the @remotion/transitions package needs to be installed.
If it is not, use the following command: 
npx remotion add @remotion/transitions # If project uses npm
bunx remotion add @remotion/transitions # If project uses bun
yarn remotion add @remotion/transitions # If project uses yarn
pnpm exec remotion add @remotion/transitions # If project uses pnpm

​
Example usage

import {TransitionSeries, linearTiming} from '@remotion/transitions';
import {fade} from '@remotion/transitions/fade';

<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={60}>
    <SceneA />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition presentation={fade()} timing={linearTiming({durationInFrames: 15})} />
  <TransitionSeries.Sequence durationInFrames={60}>
    <SceneB />
  </TransitionSeries.Sequence>
</TransitionSeries>;

​
Available Transition Types

Import transitions from their respective modules: 
import {fade} from '@remotion/transitions/fade';
import {slide} from '@remotion/transitions/slide';
import {wipe} from '@remotion/transitions/wipe';
import {flip} from '@remotion/transitions/flip';
import {clockWipe} from '@remotion/transitions/clock-wipe';

​
Slide Transition with Direction

Specify slide direction for enter/exit animations. 
import {slide} from '@remotion/transitions/slide';

<TransitionSeries.Transition presentation={slide({direction: 'from-left'})} timing={linearTiming({durationInFrames: 20})} />;
Directions: "from-left", "from-right", "from-top", "from-bottom"

​
Timing Options

import {linearTiming, springTiming} from '@remotion/transitions';

// Linear timing - constant speed
linearTiming({durationInFrames: 20});

// Spring timing - organic motion
springTiming({config: {damping: 200}, durationInFrames: 25});

​
Duration calculation

Transitions overlap adjacent scenes, so the total composition length is shorter than the sum of all sequence durations. For example, with two 60-frame sequences and a 15-frame transition:
  • Without transitions: 60 + 60 = 120 frames
  • With transition: 60 + 60 - 15 = 105 frames
The transition duration is subtracted because both scenes play simultaneously during the transition.

​
Getting the duration of a transition

Use the getDurationInFrames() method on the timing object: 
import {linearTiming, springTiming} from '@remotion/transitions';

const linearDuration = linearTiming({durationInFrames: 20}).getDurationInFrames({fps: 30});
// Returns 20

const springDuration = springTiming({config: {damping: 200}}).getDurationInFrames({fps: 30});
// Returns calculated duration based on spring physics
For springTiming without an explicit durationInFrames, the duration depends on fps because it calculates when the spring animation settles.

​
Calculating total composition duration

import {linearTiming} from '@remotion/transitions';

const scene1Duration = 60;
const scene2Duration = 60;
const scene3Duration = 60;

const timing1 = linearTiming({durationInFrames: 15});
const timing2 = linearTiming({durationInFrames: 20});

const transition1Duration = timing1.getDurationInFrames({fps: 30});
const transition2Duration = timing2.getDurationInFrames({fps: 30});

const totalDuration = scene1Duration + scene2Duration + scene3Duration - transition1Duration - transition2Duration;
// 60 + 60 + 60 - 15 - 20 = 145 frames