Skip to main content

<Series>

Available from v.2.3.1

Using this component, you can easily stitch together scenes that should play sequentially after another.

Example​

Code​

tsx
import { Series } from "remotion";
 
const Example: React.FC = () => {
  return (
    <Series>
      <Series.Sequence durationInFrames={40}>
        <Square color={"#3498db"} />
      </Series.Sequence>
      <Series.Sequence durationInFrames={20}>
        <Square color={"#5ff332"} />
      </Series.Sequence>
      <Series.Sequence durationInFrames={70}>
        <Square color={"#fdc321"} />
      </Series.Sequence>
    </Series>
  );
};
tsx
import { Series } from "remotion";
 
const Example: React.FC = () => {
  return (
    <Series>
      <Series.Sequence durationInFrames={40}>
        <Square color={"#3498db"} />
      </Series.Sequence>
      <Series.Sequence durationInFrames={20}>
        <Square color={"#5ff332"} />
      </Series.Sequence>
      <Series.Sequence durationInFrames={70}>
        <Square color={"#fdc321"} />
      </Series.Sequence>
    </Series>
  );
};

Result​

0
0:00 / 0:05

API​

The <Series /> component takes no props may only contain a list of <Series.Sequence /> instances.

<Series.Sequence />​

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

  • durationInFrames (required): For how many frames the sequence should be displayed. Children are unmounted if they are not within the time range of display.

  • offset: (optional): Pass a positive number to delay the beginning of the sequence. Pass a negative number to start the sequence earlier, and to overlay the sequence with the one that comes before.

    The offset does not apply to sequences that come before, but the sequences that come after it will also be shifted.

    Example 1: Pass 10 to delay the sequence by 10 frames and create a blank space of 10 frames before it. Example 2: Pass -10 to start the sequence earlier and overlay the sequence on top of the previous one for 10 frames.

  • 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".

See also​