Skip to main content

<Sequence />

Sequences are small individual sections in finite time that make up your video clip. By using a sequence, you can time-shift the display of your components or parts of your animation in the video.

For example, in a video trailer composed of an intro, a video clip and an outro, each part of it will be a Sequence, as each represents a sub-part of the video that should be displayed with a time-shift. (The intro should be displayed at the beginning plus disappear, same for the outro at the end...)

tsx
const MyTrailer = () => {
  return (
    <>
      <Sequence from={0}>
        <Intro />
      </Sequence>
      <Sequence from={10}>
        <Clip />
      </Sequence>
      <Sequence from={20}>
        <Outro />
      </Sequence>
    </>
  );
};
tsx
const MyTrailer = () => {
  return (
    <>
      <Sequence from={0}>
        <Intro />
      </Sequence>
      <Sequence from={10}>
        <Clip />
      </Sequence>
      <Sequence from={20}>
        <Outro />
      </Sequence>
    </>
  );
};

Sequences usually appear as subparts of a composition, they are also displayed on the timeline on the Remotion development interface and help you to visually understand the structure of your video.

API​

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

  • from (required): At which frame it's children should assume the video starts. When the sequence is at frame, it's children are at frame 0.

  • durationInFrames (optional): 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.

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

  • layout: (optional): 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.

info

Good to know: 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. However, nested sequences are not currently displayed in the timeline.

Examples​

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

0
0:00 / 0:05

tsx
const MyVideo = () => {
  return <BlueSquare />;
};
tsx
const MyVideo = () => {
  return <BlueSquare />;
};

Delay​

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

0:00 / 0:05

tsx
const MyVideo = () => {
  return (
    <Sequence from={30}>
      <BlueSquare />
    </Sequence>
  );
};
tsx
const MyVideo = () => {
  return (
    <Sequence from={30}>
      <BlueSquare />
    </Sequence>
  );
};

Trim end​

We can clip some content so it only stays visible for a certain time by specifying a non-finite durationInFrames number. In this example, we wrap the square in <Sequence from={0} durationInFrames={45}> and as you can see, it disappears after 45 frames.

0
0:00 / 0:05

Trim start​

To trim the start of some content, we can pass a negative value to from. In this example, we wrap the square in <Sequence from={-15}> and as a result, the animation has already progressed by 15 frames at the start of the video.

15
0:00 / 0:05

Trim and delay​

What if you want to trim the start of the content and delay it at the same time? You need to wrap the videos in two sequences. To the inner one we 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.

0:00 / 0:05

tsx
const TrimAndDelayExample: React.FC = () => {
  return (
    <Sequence from={30}>
      <Sequence from={-15}>
        <BlueSquare />
      </Sequence>
    </Sequence>
  );
};
tsx
const TrimAndDelayExample: React.FC = () => {
  return (
    <Sequence from={30}>
      <Sequence from={-15}>
        <BlueSquare />
      </Sequence>
    </Sequence>
  );
};

Play Sequences sequentially​

See the <Series /> helper component, which helps you calculate markup that makes sequences play after each other.

See also​