1---
2name: transitions
3description: Scene transitions and overlays for Remotion using TransitionSeries.
4metadata:
5  tags: transitions, overlays, fade, slide, wipe, scenes
6---
7 
8## TransitionSeries
9 
10`<TransitionSeries>` arranges scenes and supports two ways to enhance the cut point between them:
11 
12- **Transitions** (`<TransitionSeries.Transition>`) — crossfade, slide, wipe, etc. between two scenes. Shortens the timeline because both scenes play simultaneously during the transition.
13- **Overlays** (`<TransitionSeries.Overlay>`) — render an effect (e.g. a light leak) on top of the cut point without shortening the timeline.
14 
15Children are absolutely positioned.
16 
17## Prerequisites
18 
19```bash
20npx remotion add @remotion/transitions
21```
22 
23## Transition example
24 
25```tsx
26import { TransitionSeries, linearTiming } from "@remotion/transitions";
27import { fade } from "@remotion/transitions/fade";
28 
29<TransitionSeries>
30  <TransitionSeries.Sequence durationInFrames={60}>
31    <SceneA />
32  </TransitionSeries.Sequence>
33  <TransitionSeries.Transition
34    presentation={fade()}
35    timing={linearTiming({ durationInFrames: 15 })}
36  />
37  <TransitionSeries.Sequence durationInFrames={60}>
38    <SceneB />
39  </TransitionSeries.Sequence>
40</TransitionSeries>;
41```
42 
43## Overlay example
44 
45Any React component can be used as an overlay. For a ready-made effect, see the **light-leaks** rule.
46 
47```tsx
48import { TransitionSeries } from "@remotion/transitions";
49import { LightLeak } from "@remotion/light-leaks";
50 
51<TransitionSeries>
52  <TransitionSeries.Sequence durationInFrames={60}>
53    <SceneA />
54  </TransitionSeries.Sequence>
55  <TransitionSeries.Overlay durationInFrames={20}>
56    <LightLeak />
57  </TransitionSeries.Overlay>
58  <TransitionSeries.Sequence durationInFrames={60}>
59    <SceneB />
60  </TransitionSeries.Sequence>
61</TransitionSeries>;
62```
63 
64## Mixing transitions and overlays
65 
66Transitions and overlays can coexist in the same `<TransitionSeries>`, but an overlay cannot be adjacent to a transition or another overlay.
67 
68```tsx
69import { TransitionSeries, linearTiming } from "@remotion/transitions";
70import { fade } from "@remotion/transitions/fade";
71import { LightLeak } from "@remotion/light-leaks";
72 
73<TransitionSeries>
74  <TransitionSeries.Sequence durationInFrames={60}>
75    <SceneA />
76  </TransitionSeries.Sequence>
77  <TransitionSeries.Overlay durationInFrames={30}>
78    <LightLeak />
79  </TransitionSeries.Overlay>
80  <TransitionSeries.Sequence durationInFrames={60}>
81    <SceneB />
82  </TransitionSeries.Sequence>
83  <TransitionSeries.Transition
84    presentation={fade()}
85    timing={linearTiming({ durationInFrames: 15 })}
86  />
87  <TransitionSeries.Sequence durationInFrames={60}>
88    <SceneC />
89  </TransitionSeries.Sequence>
90</TransitionSeries>;
91```
92 
93## Transition props
94 
95`<TransitionSeries.Transition>` requires:
96 
97- `presentation` — the visual effect (e.g. `fade()`, `slide()`, `wipe()`).
98- `timing` — controls speed and easing (e.g. `linearTiming()`, `springTiming()`).
99 
100## Overlay props
101 
102`<TransitionSeries.Overlay>` accepts:
103 
104- `durationInFrames` — how long the overlay is visible (positive integer).
105- `offset?` — shifts the overlay relative to the cut point center. Positive = later, negative = earlier. Default: `0`.
106 
107## Available transition types
108 
109Import transitions from their respective modules:
110 
111```tsx
112import { fade } from "@remotion/transitions/fade";
113import { slide } from "@remotion/transitions/slide";
114import { wipe } from "@remotion/transitions/wipe";
115import { flip } from "@remotion/transitions/flip";
116import { clockWipe } from "@remotion/transitions/clock-wipe";
117```
118 
119## Slide transition with direction
120 
121```tsx
122import { slide } from "@remotion/transitions/slide";
123 
124<TransitionSeries.Transition
125  presentation={slide({ direction: "from-left" })}
126  timing={linearTiming({ durationInFrames: 20 })}
127/>;
128```
129 
130Directions: `"from-left"`, `"from-right"`, `"from-top"`, `"from-bottom"`
131 
132## Timing options
133 
134```tsx
135import { linearTiming, springTiming } from "@remotion/transitions";
136 
137// Linear timing - constant speed
138linearTiming({ durationInFrames: 20 });
139 
140// Spring timing - organic motion
141springTiming({ config: { damping: 200 }, durationInFrames: 25 });
142```
143 
144## Duration calculation
145 
146Transitions overlap adjacent scenes, so the total composition length is **shorter** than the sum of all sequence durations. Overlays do **not** affect the total duration.
147 
148For example, with two 60-frame sequences and a 15-frame transition:
149 
150- Without transitions: `60 + 60 = 120` frames
151- With transition: `60 + 60 - 15 = 105` frames
152 
153Adding an overlay between two other sequences does not change the total.
154 
155### Getting the duration of a transition
156 
157Use the `getDurationInFrames()` method on the timing object:
158 
159```tsx
160import { linearTiming, springTiming } from "@remotion/transitions";
161 
162const linearDuration = linearTiming({
163  durationInFrames: 20,
164}).getDurationInFrames({ fps: 30 });
165// Returns 20
166 
167const springDuration = springTiming({
168  config: { damping: 200 },
169}).getDurationInFrames({ fps: 30 });
170// Returns calculated duration based on spring physics
171```
172 
173For `springTiming` without an explicit `durationInFrames`, the duration depends on `fps` because it calculates when the spring animation settles.
174 
175### Calculating total composition duration
176 
177```tsx
178import { linearTiming } from "@remotion/transitions";
179 
180const scene1Duration = 60;
181const scene2Duration = 60;
182const scene3Duration = 60;
183 
184const timing1 = linearTiming({ durationInFrames: 15 });
185const timing2 = linearTiming({ durationInFrames: 20 });
186 
187const transition1Duration = timing1.getDurationInFrames({ fps: 30 });
188const transition2Duration = timing2.getDurationInFrames({ fps: 30 });
189 
190const totalDuration =
191  scene1Duration +
192  scene2Duration +
193  scene3Duration -
194  transition1Duration -
195  transition2Duration;
196// 60 + 60 + 60 - 15 - 20 = 145 frames
197```
198