Skip to main content

<TransitionSeries>

available from v4.0.59

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

Each transition consists of two parts:

1
presentation: The effect that is being used, for example fade() or wipe().
2
timing: The duration and the progress curve, for example springTiming() or linearTiming()

This package has some presentations and timings built-in, but custom ones can be created as well.

MyComp.tsx
tsx
import {
linearTiming,
springTiming,
TransitionSeries,
} from "@remotion/transitions";
 
import { fade } from "@remotion/transitions/fade";
import { wipe } from "@remotion/transitions/wipe";
 
export const MyComp: React.FC = () => {
return (
<TransitionSeries>
<TransitionSeries.Sequence durationInFrames={60}>
<Fill color="blue" />
</TransitionSeries.Sequence>
<TransitionSeries.Transition
timing={springTiming({ config: { damping: 200 } })}
presentation={fade()}
/>
<TransitionSeries.Sequence durationInFrames={60}>
<Fill color="black" />
</TransitionSeries.Sequence>
<TransitionSeries.Transition
timing={linearTiming({ durationInFrames: 30 })}
presentation={wipe()}
/>
<TransitionSeries.Sequence durationInFrames={60}>
<Fill color="white" />
</TransitionSeries.Sequence>
</TransitionSeries>
);
};
MyComp.tsx
tsx
import {
linearTiming,
springTiming,
TransitionSeries,
} from "@remotion/transitions";
 
import { fade } from "@remotion/transitions/fade";
import { wipe } from "@remotion/transitions/wipe";
 
export const MyComp: React.FC = () => {
return (
<TransitionSeries>
<TransitionSeries.Sequence durationInFrames={60}>
<Fill color="blue" />
</TransitionSeries.Sequence>
<TransitionSeries.Transition
timing={springTiming({ config: { damping: 200 } })}
presentation={fade()}
/>
<TransitionSeries.Sequence durationInFrames={60}>
<Fill color="black" />
</TransitionSeries.Sequence>
<TransitionSeries.Transition
timing={linearTiming({ durationInFrames: 30 })}
presentation={wipe()}
/>
<TransitionSeries.Sequence durationInFrames={60}>
<Fill color="white" />
</TransitionSeries.Sequence>
</TransitionSeries>
);
};

API

<TransitionSeries>

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

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

<TransitionSeries.Sequence>

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

As children, put the contents of your scene.

<TransitionSeries.Transition>

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.
It is not allowed for two <TransitionSeries.Transition> components to be next to each other.

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>
);
};
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>

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

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
Assuming a framerate of 30fps
tsx
import { springTiming } from "@remotion/transitions";
 
springTiming({ config: { damping: 200 } }).getDurationInFrames({ fps: 30 }); // 23

Rules

1
It is forbidden to have a transition that is longer than the duration of the previous or next sequence.
2
There can be no two transitions next to each other.
3
There must be at least one sequence before or after a transition.

See also