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​

src/Example.tsx
tsx
import {Series} from 'remotion';
 
export 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​

API​

The <Series /> component takes no props. It may only contain a list of <Series.Sequence /> instances.
A <Series.Sequence /> component accepts the following props:

durationInFrames?​

For how many frames the sequence should be displayed. Children are unmounted if they are not within the time range of display.

Only the last <Series.Sequence /> instance is allowed to have Infinity as a duration, all previous one must have a positive integer.

offset?​

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?​

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

style?v3.3.4​

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?v3.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?v4.0.140​

Premount the sequence for a set number of frames.

ref?v3.3.4​

You can add a React ref to a <Series.Sequence>. If you use TypeScript, you need to type it with HTMLDivElement:

src/Example.tsx
tsx
import React, {useRef} from 'react';
import {Series} from 'remotion';
 
export const Example: React.FC = () => {
  const first = useRef<HTMLDivElement>(null);
  const second = useRef<HTMLDivElement>(null);
 
  return (
    <Series>
      <Series.Sequence durationInFrames={40} ref={first}>
        <Square color={'#3498db'} />
      </Series.Sequence>
      <Series.Sequence durationInFrames={20} ref={second}>
        <Square color={'#5ff332'} />
      </Series.Sequence>
      <Series.Sequence durationInFrames={70}>
        <Square color={'#fdc321'} />
      </Series.Sequence>
    </Series>
  );
};

Compatibility​

BrowsersEnvironments
Chrome
Firefox
Safari

See also​