` (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 `` wrapper. ### How `.Sequence` Works The `TransitionSeries.Sequence` (referred to as *SeriesSequence* in the source), defined in [`packages/transitions/src/TransitionSeries.tsx`](https://github.com/remotion-dev/remotion/blob/main/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: ```tsx // From TransitionSeries.tsx, lines 50-53 const SeriesSequence: React.FC = ({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 `` 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 | `` (Core) | `.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`](https://github.com/remotion-dev/remotion/blob/main/packages/core/src/Sequence.tsx) | [`packages/transitions/src/TransitionSeries.tsx`](https://github.com/remotion-dev/remotion/blob/main/packages/transitions/src/TransitionSeries.tsx) (lines 50-53) | ## When to Use the `` Component Choose the core `` 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 `` 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`](https://github.com/remotion-dev/remotion/blob/main/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 `.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`](https://github.com/remotion-dev/remotion/blob/main/packages/transitions/src/TransitionSeries.tsx), the `SeriesSequence` is a placeholder consumed by `TransitionSeriesChildren`, which ultimately renders a standard `` 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 `` with Premount This example demonstrates the core `Sequence` component with premount behavior, useful for preloading images or heavy components before they appear on screen. ```tsx import {AbsoluteFill, Sequence} from 'remotion'; export const StandaloneSequence = () => { return ( {/* Renders from frame 30 to 90, but starts mounting at frame 20 */} {/* Postmount keeps the component alive 15 frames after it disappears */} ); }; ``` *Source reference:* [`packages/core/src/Sequence.tsx`](https://github.com/remotion-dev/remotion/blob/main/packages/core/src/Sequence.tsx) implements the `premountFor` and `postmountFor` logic using the `` wrapper (lines 258-277). ### `TransitionSeries` with Automatic Transitions This example shows the `TransitionSeries` API using `TransitionSeries.Sequence` to create automatic cross-fades between scenes. ```tsx import { TransitionSeries, AbsoluteFill, } from 'remotion'; export const CoordinatedTransitions = () => { return ( {/* First clip – will be crossed‑faded into the next */}

First scene

{/* Transition – default slide, can be customized */} {/* Second clip – receives the exiting animation from the transition */}

Second scene

{/* Optional overlay that spans the cut point */}

); }; ``` *Source reference:* [`packages/transitions/src/TransitionSeries.tsx`](https://github.com/remotion-dev/remotion/blob/main/packages/transitions/src/TransitionSeries.tsx) defines `TransitionSeries.Sequence` (the *SeriesSequence*) and orchestrates the rendering of regular `` elements with transition wrappers. ## Summary - **``** is the foundational timing component in Remotion, defined in [`packages/core/src/Sequence.tsx`](https://github.com/remotion-dev/remotion/blob/main/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. - **`.Sequence`** (Series) is a placeholder component defined in [`packages/transitions/src/TransitionSeries.tsx`](https://github.com/remotion-dev/remotion/blob/main/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 `.Sequence` outside of a `` component? No. `TransitionSeries.Sequence` is designed as a placeholder that only functions correctly when rendered as a child of ``. According to the source code in [`packages/transitions/src/TransitionSeries.tsx`](https://github.com/remotion-dev/remotion/blob/main/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 `.Sequence` support `premountFor` and `postmountFor`? No. The `premountFor` and `postmountFor` props are specific to the core `` component implemented in [`packages/core/src/Sequence.tsx`](https://github.com/remotion-dev/remotion/blob/main/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 `` component outside the `TransitionSeries` paradigm. ### Which component should I use for simple timing without transitions? Use the core `` 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`](https://github.com/remotion-dev/remotion/blob/main/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`](https://github.com/remotion-dev/remotion/blob/main/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`](https://github.com/remotion-dev/remotion/blob/main/flatten-children.js), validates overlay configurations, computes timing offsets, and finally renders standard `` components (from the core package) for each `SeriesSequence`. Specifically, around line 89, the code renders a `` 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.