Skip to main content
Impact: HIGH - Enables smooth scene changes and professional video flow
This skill covers using Remotion’s TransitionSeries API and creating custom transitions between scenes or visual states.

​
TransitionSeries for Scene Changes

Use TransitionSeries to animate between multiple scenes or clips. 
<Sequence from={0} durationInFrames={60}>
  <SceneA />
</Sequence>
<Sequence from={60} durationInFrames={60}>
  <SceneB />
</Sequence>
TransitionSeries automatically handles the overlap between sequences, making it much easier than manually managing opacity or position transitions.

​
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";
Crossfade between scenes with opacity transition.Best for: General purpose, subtle scene changes
presentation={fade()}
Slide one scene out while the next slides in.Best for: Directional flow, sequential content
presentation={slide({ direction: "from-left" })}
Reveal next scene with a directional wipe.Best for: Dramatic reveals, chapter transitions
presentation={wipe({ direction: "from-top" })}
3D flip effect between scenes.Best for: Playful content, card-flip metaphors
presentation={flip({ direction: "horizontal" })}
Circular wipe emanating from center.Best for: Time-based content, countdown reveals
presentation={clockWipe()}

​
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 })}
/>;
Available directions: "from-left", "from-right", "from-top", "from-bottom"
Direction refers to where the incoming scene comes from. For example, "from-left" means the new scene slides in from the left side.

​
Custom Crossfade Without TransitionSeries

For simple opacity crossfades within a single component: 
const TRANSITION_START = 60;
const TRANSITION_DURATION = 15;

const scene1Opacity = interpolate(
  frame,
  [TRANSITION_START, TRANSITION_START + TRANSITION_DURATION],
  [1, 0],
  { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
);

const scene2Opacity = interpolate(
  frame,
  [TRANSITION_START, TRANSITION_START + TRANSITION_DURATION],
  [0, 1],
  { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
);

<AbsoluteFill style={{ opacity: scene1Opacity }}><SceneA /></AbsoluteFill>
<AbsoluteFill style={{ opacity: scene2Opacity }}><SceneB /></AbsoluteFill>
Use AbsoluteFill to ensure both scenes occupy the same space. Otherwise they’ll stack vertically.

​
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 });
Use when: You need predictable, constant-speed transitionsConfiguration:
linearTiming({ durationInFrames: 20 })
Best for: Fade, wipe, slide transitions

​
Key Patterns

1

Choose Appropriate Transition

  • Fade: Default choice for most scene changes
  • Slide: When there’s directional progression
  • Wipe: For dramatic chapter breaks
  • Flip: For playful, card-like reveals
2

Set Appropriate Duration

  • Fast (10-15 frames): Quick cuts, energetic pacing
  • Medium (15-25 frames): Standard professional transitions
  • Slow (25-40 frames): Dramatic, cinematic transitions
3

Match Timing to Content

Use linearTiming for smooth, predictable transitions. Use springTiming for organic, bouncy effects.

​
Common Mistakes to Avoid

Don’t use abrupt cuts between scenes - Always transition smoothly unless you specifically want a jarring effect.
Don’t make transitions too long - 15-25 frames is usually sufficient. Longer transitions feel sluggish.
Don’t forget AbsoluteFill for custom crossfades - Without it, scenes will stack vertically instead of overlapping.
Don’t mix too many transition types - Stick to 1-2 transition styles per video for visual consistency.

​
Advanced: Multiple Scene Transitions

<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={60}>
    <Intro />
  </TransitionSeries.Sequence>
  
  <TransitionSeries.Transition
    presentation={fade()}
    timing={linearTiming({ durationInFrames: 15 })}
  />
  
  <TransitionSeries.Sequence durationInFrames={90}>
    <MainContent />
  </TransitionSeries.Sequence>
  
  <TransitionSeries.Transition
    presentation={slide({ direction: "from-left" })}
    timing={linearTiming({ durationInFrames: 20 })}
  />
  
  <TransitionSeries.Sequence durationInFrames={45}>
    <Outro />
  </TransitionSeries.Sequence>
</TransitionSeries>
You can vary transition types within the same TransitionSeries for visual interest, but maintain consistency in timing.

Sequencing

Control when scenes appear

Spring Physics

Use springs in transitions

Build docs developers (and LLMs) love

Get started for freeTalk to us