Remotion Sequence Component vs Series Component: When to Use Each

Use the core <Sequence> component for standalone timing, layout control, and premount behavior, and use <TransitionSeries.Sequence> (Series) only inside a <TransitionSeries> wrapper when you need automatic cross-fades and coordinated transitions between consecutive clips.

The remotion-dev/remotion repository provides two distinct APIs for timing video content: the foundational <Sequence> component and the specialized <TransitionSeries.Sequence> (commonly called "Series"). While both control when elements appear on screen, they serve fundamentally different architectural roles in the Remotion rendering pipeline. Understanding these differences is critical for building performant, maintainable video compositions.

Core Architectural Differences

How <Sequence> Works

The <Sequence> component, defined in packages/core/src/Sequence.tsx, is a self-contained timing unit that creates its own SequenceContext (lines 73-88) and registers itself with the SequenceManager (lines 112-125). This registration makes the sequence visible on the Remotion Studio timeline and provides the runtime with absolute frame calculations (cumulatedFrom + from).

The component renders an absolutely-positioned <div> (or custom layout element) and conditionally mounts its children based on the current frame. It supports advanced timing features like premountFor and postmountFor (lines 258-277), which allow components to render before they become visible or persist after disappearing using the <Freeze> wrapper.

How <TransitionSeries>.Sequence Works

The TransitionSeries.Sequence (referred to as SeriesSequence in the source), defined in packages/transitions/src/TransitionSeries.tsx at lines 50-53, is fundamentally different. It does not create a context or register with the SequenceManager. Instead, it is a placeholder component that simply returns its children:

// From TransitionSeries.tsx, lines 50-53
const SeriesSequence: React.FC<SeriesSequenceProps> = ({children}) => {
  return <>{children}</>;
};

The actual rendering work happens in TransitionSeriesChildren (lines 74-126), which walks the children tree, computes offsets, validates overlays, and finally renders a standard <Sequence> component for each SeriesSequence (see the rendering block starting around line 89). This indirection allows the library to automatically inject transition components (UppercasePrevPresentation and UppercaseNextPresentation) around the child content, handling cross-fade logic without manual intervention.

Key Differences at a Glance

Feature	<Sequence> (Core)	<TransitionSeries>.Sequence (Series)
Namespace	Exported from @remotion/core	Static property of TransitionSeries (TransitionSeries.Sequence)
Rendering	Creates absolutely-positioned container, registers with Studio timeline	Placeholder; renders nothing until processed by parent TransitionSeries
Context Creation	Creates SequenceContext and registers with SequenceManager	No context creation; consumed by TransitionSeriesChildren
Premount/Postmount	Native support via premountFor and postmountFor props	Not applicable; timing controlled by parent series
Transition Handling	Manual; you must add your own Transition components	Automatic; pairs with TransitionSeries.Transition and TransitionSeries.Overlay
Source File	packages/core/src/Sequence.tsx	packages/transitions/src/TransitionSeries.tsx (lines 50-53)

When to Use the <Sequence> Component

Choose the core <Sequence> component when you need fine-grained control over timing and layout:

• Standalone timing: You are building a composition that does not require automatic cross-fades between consecutive clips, or you prefer to manage transitions manually.
• Layout control: You need the absolutely-positioned container that <Sequence> provides, or you are using the layout prop to customize positioning behavior.
• Premount and postmount behavior: You need components to render before they appear on screen (to preload assets) or persist after they disappear using premountFor and postmountFor.
• Studio visibility: You want the sequence to appear independently on the Remotion Studio timeline for debugging and frame scrubbing.

According to the source code in packages/core/src/Sequence.tsx, this component is the foundation of Remotion's timing system, creating the SequenceContext that child components can consume to know their relative frame position.

When to Use the <TransitionSeries>.Sequence Component

Use TransitionSeries.Sequence (Series) only when you are already using the TransitionSeries API and need coordinated transitions:

• Automatic cross-fades: You want consecutive clips to automatically fade or slide into one another without manually calculating overlap frames or transition timings.
• Transition overlays: You need elements that span the cut point between two sequences, such as text overlays, background effects, or watermarks that persist across the transition.
• Simplified timeline logic: You prefer to declare transitions declaratively using TransitionSeries.Transition rather than imperatively managing from and durationInFrames calculations for overlapping content.

As implemented in packages/transitions/src/TransitionSeries.tsx, the SeriesSequence is a placeholder consumed by TransitionSeriesChildren, which ultimately renders a standard <Sequence> wrapped with transition logic. This means you sacrifice some low-level control (like independent premount settings) in exchange for automatic transition orchestration.

Code Examples

Basic <Sequence> with Premount

This example demonstrates the core Sequence component with premount behavior, useful for preloading images or heavy components before they appear on screen.

import {AbsoluteFill, Sequence} from 'remotion';

export const StandaloneSequence = () => {
  return (
    <AbsoluteFill>
      {/* Renders from frame 30 to 90, but starts mounting at frame 20 */}
      <Sequence 
        from={30} 
        durationInFrames={60} 
        premountFor={10}
      >
        <HeavyComponentThatNeedsPreload />
      </Sequence>

      {/* Postmount keeps the component alive 15 frames after it disappears */}
      <Sequence 
        from={120} 
        durationInFrames={30} 
        postmountFor={15}
      >
        <ComponentThatShouldPersist />
      </Sequence>
    </AbsoluteFill>
  );
};

Source reference: packages/core/src/Sequence.tsx implements the premountFor and postmountFor logic using the <Freeze> wrapper (lines 258-277).

TransitionSeries with Automatic Transitions

This example shows the TransitionSeries API using TransitionSeries.Sequence to create automatic cross-fades between scenes.

import {
  TransitionSeries,
  AbsoluteFill,
} from 'remotion';

export const CoordinatedTransitions = () => {
  return (
    <AbsoluteFill>
      <TransitionSeries>
        {/* First clip – will be crossed‑faded into the next */}
        <TransitionSeries.Sequence durationInFrames={90}>
          <div style={{background: '#ff8', width: '100%', height: '100%'}}>
            First scene
          </div>
        </TransitionSeries.Sequence>

        {/* Transition – default slide, can be customized */}
        <TransitionSeries.Transition
          timing={{type: 'duration', durationInFrames: 30}}
        />

        {/* Second clip – receives the exiting animation from the transition */}
        <TransitionSeries.Sequence durationInFrames={90}>
          <div style={{background: '#8ff', width: '100%', height: '100%'}}>
            Second scene
          </div>
        </TransitionSeries.Sequence>

        {/* Optional overlay that spans the cut point */}
        <TransitionSeries.Overlay durationInFrames={20}>
          <div
            style={{
              background: 'rgba(0,0,0,0.5)',
              width: '100%',
              height: '100%',
            }}
          />
        </TransitionSeries.Overlay>
      </TransitionSeries>
    </AbsoluteFill>
  );
};

Source reference: packages/transitions/src/TransitionSeries.tsx defines TransitionSeries.Sequence (the SeriesSequence) and orchestrates the rendering of regular <Sequence> elements with transition wrappers.

Summary

• <Sequence> is the foundational timing component in Remotion, defined in packages/core/src/Sequence.tsx. It creates a SequenceContext, registers with the SequenceManager for Studio timeline visibility, and supports advanced features like premountFor and postmountFor. Use it for standalone timing, layout control, and when you need fine-grained control over mounting behavior.

• <TransitionSeries>.Sequence (Series) is a placeholder component defined in packages/transitions/src/TransitionSeries.tsx (lines 50-53). It does not render independently; instead, the parent TransitionSeries consumes it to automatically wrap content with transition logic. Use it only when building a TransitionSeries timeline that requires automatic cross-fades, coordinated entering/exiting animations, and overlay support across cut points.

• Architectural distinction: Sequence is a self-contained unit that manages its own lifecycle and timeline registration. TransitionSeries.Sequence relies on the parent component to calculate offsets and inject transition wrappers, trading low-level control for declarative transition orchestration.

Frequently Asked Questions

Can I use <TransitionSeries>.Sequence outside of a <TransitionSeries> component?

No. TransitionSeries.Sequence is designed as a placeholder that only functions correctly when rendered as a child of <TransitionSeries>. According to the source code in packages/transitions/src/TransitionSeries.tsx (lines 50-53), the component simply returns its children without any timing logic. The actual sequence registration and rendering is handled by the parent TransitionSeries via the TransitionSeriesChildren utility (lines 74-126). Using it outside this context will result in content that lacks timing information and does not appear correctly in the video.

Does <TransitionSeries>.Sequence support premountFor and postmountFor?

No. The premountFor and postmountFor props are specific to the core <Sequence> component implemented in packages/core/src/Sequence.tsx (lines 258-277). When using TransitionSeries.Sequence, timing is controlled entirely by the parent TransitionSeries component, which calculates offsets and durations automatically to accommodate transitions. If you need premount behavior within a transition series, you would need to implement it manually within the child content or use the core <Sequence> component outside the TransitionSeries paradigm.

Which component should I use for simple timing without transitions?

Use the core <Sequence> component from @remotion/core. It is the appropriate choice when you need simple timing control, layout management, or premount/postmount behavior without the overhead of the transitions system. As implemented in packages/core/src/Sequence.tsx, it creates its own SequenceContext and registers with the SequenceManager, making it visible on the Remotion Studio timeline for debugging. It requires no parent wrapper component and gives you full control over the from and durationInFrames props.

How does TransitionSeries handle the rendering of Series children?

The TransitionSeries component uses a specialized child processor called TransitionSeriesChildren (defined in packages/transitions/src/TransitionSeries.tsx, lines 74-126) to handle rendering. When you provide TransitionSeries.Sequence children, the parent component flattens the children tree using flatten-children.js, validates overlay configurations, computes timing offsets, and finally renders standard <Sequence> components (from the core package) for each SeriesSequence. Specifically, around line 89, the code renders a <Sequence> with computed from and durationInFrames, injecting the UppercasePrevPresentation and UppercaseNextPresentation components to handle entering and exiting animations automatically. This architecture allows TransitionSeries to coordinate complex transitions while the underlying Sequence components handle the actual timing and Studio registration.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}