---
image: /generated/articles-docs-sequence.png
id: sequence
title: <Sequence>
crumb: 'API'
---

import {SequenceForwardExample} from '../components/SequenceExamples/SequenceForward';

```twoslash include example
const BlueSquare: React.FC = () => <div></div>
// - BlueSquare
```

By using a sequence, you can time-shift the display of your components or parts of your animation in the video.

```tsx twoslash title="MyTrailer.tsx"
import {Sequence} from 'remotion';

export const Intro = () => <></>;
export const Clip = () => <></>;
export const Outro = () => <></>;

// ---cut---

const MyTrailer = () => {
  return (
    <>
      <Sequence durationInFrames={30}>
        <Intro />
      </Sequence>
      <Sequence from={30} durationInFrames={30}>
        <Clip />
      </Sequence>
      <Sequence from={60}>
        <Outro />
      </Sequence>
    </>
  );
};
```

- `<Intro>` will show from frame 0–29.
- `<Clip>` will show from frame 30 until frame 59.
- `<Outro>` will show from frame 60 until the end of the composition.

All children of a `<Sequence>` that call [`useCurrentFrame()`](/docs/use-current-frame) will receive a value that is shifted by [`from`](#from).

```tsx twoslash title="MyTrailer.tsx"
import {Sequence, useCurrentFrame} from 'remotion';

const Intro = () => <div>{useCurrentFrame()}</div>;

const MyTrailer = () => {
  return (
    <>
      <Intro />
      <Sequence from={30}>
        <Intro />
      </Sequence>
    </>
  );
};
```

- At frame `0`, this would render `<div>0</div>`.
- At frame `30`, this would render `<div>30</div><div>0</div>`.

Using the [`durationInFrames`](#durationinframes) prop, you can define for how long the children of a `<Sequence>` should be mounted.

By default, the children of a `<Sequence>` are wrapped in an [`<AbsoluteFill>`](/docs/absolute-fill) component. If you don't want this behavior, add [`layout="none"`](#layout) as a prop.

## Cascading

You can nest sequences within each other and they will cascade.  
For example, a sequence that starts at frame 60 which is inside a sequence that starts at frame 30 will have it's children start at frame 90.

## Examples

All the examples below are based on the following animation of a blue square:

<SequenceForwardExample type="base" />

<br />

```tsx twoslash title="MyVideo.tsx"
// @include: example-BlueSquare
// ---cut---
const MyVideo = () => {
  return <BlueSquare />;
};
```

### Delay

If you would like to delay the content by say 30 frames, you can wrap it in <br/> `<Sequence from={30}>`.

<SequenceForwardExample type="delay" />
<br />

```tsx twoslash title="delay.tsx"
// @include: example-BlueSquare
import {Sequence} from 'remotion';
// ---cut---
const MyVideo = () => {
  return (
    <Sequence from={30}>
      <BlueSquare />
    </Sequence>
  );
};
```

### Trim end

Wrap your component in a `<Sequence>` with a finite `durationInFrames` prop to make it unmount after the duration has passed.

<SequenceForwardExample type="clip" />
<br />

```tsx twoslash title="trim-end.tsx"
// @include: example-BlueSquare
import {Sequence} from 'remotion';
// ---cut---
const ClipExample: React.FC = () => {
  return (
    <Sequence durationInFrames={45}>
      <BlueSquare />
    </Sequence>
  );
};
```

### Trim start

Pass `trimBefore` to trim the beginning of the content.
The animation has already progressed by 15 frames when the content appears.

<SequenceForwardExample type="trim-start" />
<br />

```tsx title="trim-start.tsx"
const TrimStartExample: React.FC = () => {
  return (
    <Sequence trimBefore={15}>
      <BlueSquare />
    </Sequence>
  );
};
```

### Trim and delay

Wrap the content in two `<Sequence>`'s.  
To the inner one, pass a negative start value `from={-15}` to trim away the first 15 frames of the content.  
To the outer one we pass a positive value `from={30}` to then shift it forwards by 30 frames.

<SequenceForwardExample type="trim-and-delay" />
<br />

```tsx twoslash title="trim-and-delay.tsx"
// @include: example-BlueSquare
import {Sequence} from 'remotion';
// ---cut---
const TrimAndDelayExample: React.FC = () => {
  return (
    <Sequence from={30}>
      <Sequence from={-15}>
        <BlueSquare />
      </Sequence>
    </Sequence>
  );
};
```

## Play Sequences sequentially

See the [`<Series />`](/docs/series) helper component, which helps you calculate markup that makes sequences play after each other.

## Props

The Sequence component is a high order component and accepts, besides children, the following props:

### `from?`

(optional from v3.2.36, _required_ in previous versions)

At which frame it's children should assume the video starts. When the sequence is at `frame`, it's children are at frame `0`.
From v3.2.36 onwards, this prop will be optional; by default, it will be 0.

### `durationInFrames?`

For how many frames the sequence should be displayed. Children are unmounted if they are not within the time range of display. By default it will be `Infinity` to avoid limit the duration of the sequence.

### `trimBefore?`<AvailableFrom v="4.0.482" />

Trims the beginning of the child timeline by the specified number of frames.
Default: `0`.

The sequence still starts at [`from`](#from), but children using [`useCurrentFrame()`](/docs/use-current-frame) receive a frame that is advanced by `trimBefore`.

```tsx twoslash title="MyVideo.tsx"
import {Sequence, useCurrentFrame} from 'remotion';

const Child = () => <div>{useCurrentFrame()}</div>;

// ---cut---
export const MyVideo = () => {
  return (
    <Sequence from={30} trimBefore={15}>
      <Child />
    </Sequence>
  );
};
```

In the example above, `Child` mounts at composition frame `30` and receives frame `15`.

### `freeze?`<AvailableFrom v="4.0.476" />

Freezes the children of the sequence at the specified frame.
Pass `null` or omit the prop to keep the sequence unfrozen.

```tsx twoslash title="MyVideo.tsx"
import {Sequence, useCurrentFrame} from 'remotion';

const Child = () => <div>{useCurrentFrame()}</div>;

// ---cut---

export const MyVideo = () => {
  return (
    <Sequence freeze={20}>
      <Child />
    </Sequence>
  );
};
```

This is equivalent to wrapping the children in [`<Freeze frame={20}>`](/docs/freeze), but without remounting the sequence.

### `height?`<AvailableFrom v="4.0.80"/>

Gives the sequence a specific `style={{height: height}}` style and overrides `height` that is returned by the [`useVideoConfig()`](/docs/use-video-config) hook in child components. Useful for including a component that was designed for a specific height.

### `width?`<AvailableFrom v="4.0.80"/>

Gives the sequence a specific `style={{width: width}}` style and overrides `width` that is returned by the [`useVideoConfig()`](/docs/use-video-config) hook in child components. Useful for including a component that was designed for a specific width.

### `name?`

You can give your sequence a name and it will be shown as the label of the sequence in the timeline of the Remotion Studio. This property is purely for helping you keep track of sequences in the timeline.

### `layout?`

Either `"absolute-fill"` _(default)_ or `"none"`. By default, your sequences will be absolutely positioned, so they will overlay each other. If you would like to opt out of it and handle layouting yourself, pass `layout="none"`. Available since v1.4.

### `outlineRef?`<AvailableFrom v="4.0.479" />

A React ref pointing to the element that the Remotion Studio should use for drawing the selection outline in the preview.

By default, the Studio outlines the wrapper created by `<Sequence>`. If you use `layout="none"`, no wrapper exists, so pass `outlineRef` to make the rendered element selectable in the preview.

```tsx twoslash title="MyVideo.tsx"
import {useRef} from 'react';
import {Sequence} from 'remotion';

export const MyVideo = () => {
  const outlineRef = useRef<HTMLDivElement>(null);

  return (
    <Sequence layout="none" outlineRef={outlineRef}>
      <div ref={outlineRef}>Selectable in the Studio preview</div>
    </Sequence>
  );
};
```

### `style?`<AvailableFrom v="3.0.27"/>

CSS styles to be applied to the container. If `layout` is set to `none`, there is no container and setting this style is not allowed.

### `className?`<AvailableFrom v="3.3.45"/>

A class name to be applied to the container. If `layout` is set to `none`, there is no container and setting this style is not allowed.

### `premountFor?`<AvailableFrom v="4.0.140" />

[Premount](/docs/player/premounting) the sequence for a set number of frames.
From [v5.0](/docs/5-0-migration), the default value changes from `0` to `fps` (1 second).

### `postmountFor?`<AvailableFrom v="4.0.340" />

Same as `premountFor`, but for after the sequence has ended.  
Use this only if you expect the user to frequently seek backwards in the timeline and you want to avoid flickers for this behavior.

### `styleWhilePremounted?`<AvailableFrom v="4.0.252" />

CSS styles to be applied to the container while the sequence is premounted.  
The `style` is still applied, but `styleWhilePremounted` can override properties.

### `showInTimeline?`<AvailableFrom v="4.0.110" />

If set to `false`, the track will not be shown in the Studio's timeline.  
Child `<Sequence>`'s will show by default, unless `showInTimeline` is also set to false.  
This behavior is stable as of v4.0.110, previously the behavior was different, but this prop not documented.

### `hidden?`<AvailableFrom v="4.0.462" />

If set to `true`, the sequence and its children are not rendered.

The eye icon in the Studio timeline toggles this prop and persists it to your source code.

## Adding a ref

You can add a [React ref](https://react.dev/learn/manipulating-the-dom-with-refs) to an `<Sequence>` from version `v3.2.13` on. If you use TypeScript, you need to type it with `HTMLDivElement`:

```tsx twoslash
import {useRef} from 'react';
import {Sequence} from 'remotion';

const content = <div>Hello, World</div>;
// ---cut---
const MyComp = () => {
  const ref = useRef<HTMLDivElement>(null);
  return (
    <Sequence from={10} ref={ref}>
      {content}
    </Sequence>
  );
};
```

## Note for `@remotion/three`

A `<Sequence>` by default will return a `<div>` component which is not allowed inside a [`<ThreeCanvas>`](/docs/three-canvas).  
Avoid an error by passing `layout="none"` to `<Sequence>`. Example: `<Sequence layout="none">`.

## Compatibility

<CompatibilityTable chrome firefox safari nodejs="" bun="" serverlessFunctions="" clientSideRendering serverSideRendering player studio hideServers />

## See also

- [Source code for this component](https://github.com/remotion-dev/remotion/blob/main/packages/core/src/Sequence.tsx)
- [Reuse components using Sequences](/docs/reusability)
- [`<Composition />`](/docs/composition)
- [`<Series />`](/docs/series)