Skip to main content

<TransitionSeries>v4.0.59

The <TransitionSeries> component behaves the same as the <Series> component, but allows for <TransitionSeries.Transition> and <TransitionSeries.Overlay> components to be rendered between <TransitionSeries.Sequence> components.

Between any two sequences, you can place either a transition or an overlay:

Transition example​

TransitionExample.tsx
tsx
import {linearTiming, springTiming, TransitionSeries} from '@remotion/transitions';
import {fade} from '@remotion/transitions/fade';
import {wipe} from '@remotion/transitions/wipe';
 
export const TransitionExample: React.FC = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="#0b84f3" />
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition timing={springTiming({config: {damping: 200}})} presentation={fade()} />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="pink" />
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition timing={linearTiming({durationInFrames: 30})} presentation={wipe()} />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="#2ecc71" />
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

Overlay examplev4.0.415​

OverlayExample.tsx
tsx
import {LightLeak} from '@remotion/light-leaks';
import {TransitionSeries} from '@remotion/transitions';
 
export const OverlayExample: React.FC = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="blue" />
      </TransitionSeries.Sequence>
      <TransitionSeries.Overlay durationInFrames={20}>
        <LightLeak />
      </TransitionSeries.Overlay>
      <TransitionSeries.Sequence durationInFrames={60}>
        <Fill color="black" />
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

API​

<TransitionSeries>​

Inherits the from, name, className, and style props from <Sequence>.

The <TransitionSeries> component can only contain <TransitionSeries.Sequence>, <TransitionSeries.Transition>, and <TransitionSeries.Overlay> components.

<TransitionSeries.Sequence>​

Inherits the durationInFrames, name, className, style, premountFor, postmountFor and layout props from <Sequence>.

As children, put the contents of your scene.

<TransitionSeries.Transition>​

Placed between two sequences to animate from one scene to the next.
During the transition, both scenes are rendered simultaneously and the total duration is shortened by the transition length.

Takes two props:

  • timing: A timing of type TransitionTiming. See Timings for more information.
  • presentation?: A presentation of type TransitionPresentation. If not specified, the default value is slide(). See Presentations for more information.

Must be a direct child of <TransitionSeries>. At least one <TransitionSeries.Sequence> component must come before or after the <TransitionSeries.Transition> component.

<TransitionSeries.Overlay>v4.0.415​

Placed between two sequences to render children on top of the cut point.
The overlay does not shorten the timeline — adjacent sequences remain at full length.

The overlay is centered on the cut point by default: half the duration before the cut, half after.
Children animate independently — no progress context is provided.

Takes two props:

  • durationInFrames: How long the overlay is visible. Must be a positive integer.
  • offset?: Shifts the overlay relative to the center of the cut point. Positive values shift right (later), negative values shift left (earlier). Default: 0. Must be a finite integer.

The overlay must not extend before frame 0 or beyond the duration of the adjacent sequences.

Enter and exit animations​

You don't necessarily have to use <TransitionSeries> for transitions between scenes. You can also use it to animate the entrace or exit of a scene by putting a transition first or last in the <TransitionSeries>.

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

Duration of a <TransitionSeries>​

Transitions shorten the total duration because both scenes overlap.
Overlays do not — the total duration stays the same as if no overlay was present.

Consider this example:

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

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.

Example with 3 slides
SlideTransition.tsx
tsx
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.Transition presentation={slide()} timing={linearTiming({durationInFrames: 45})} />
      <TransitionSeries.Sequence durationInFrames={90}>
        <Letter color="green">C</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};
  • The first slide is shown for 40 frames
  • The second slide is shown for 60 frames
  • The third slide is shown for 90 frames
  • There are two transitions, one 30 frames long and one 45 frames long
  1. Sum up the durations: 40 + 60 + 90 = 190
  2. Subtract the duration of the transitions: 190 - 30 - 45 = 115

Getting the duration of a transition​

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

Assuming a framerate of 30fps
tsx
import {springTiming} from '@remotion/transitions';
 
springTiming({config: {damping: 200}}).getDurationInFrames({fps: 30}); // 23

Rules​

A transition must not be longer than the duration of the previous or next sequence.

Two transitions cannot be adjacent.

Two overlays cannot be adjacent.

A transition and an overlay cannot be adjacent — they occupy the same slot between sequences.

There must be at least one sequence before or after a transition or overlay.

See also​