Skip to main content

<Sequence>

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

MyTrailer.tsx
tsx
const MyTrailer = () => {
  return (
    <>
      <Sequence durationInFrames={30}>
        <Intro />
      </Sequence>
      <Sequence from={30} durationInFrames={30}>
        <Clip />
      </Sequence>
      <Sequence from={60}>
        <Outro />
      </Sequence>
    </>
  );
};
MyTrailer.tsx
tsx
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 on until frame 59.
<Outro>

will show from frame 60 on until the end of the composition.

All children of a <Sequence> that call useCurrentFrame() will receive a value that is shifted by from.

MyTrailer.tsx
tsx
import { Sequence, useCurrentFrame } from "remotion";
 
const Intro = () => <div>{useCurrentFrame()}</div>;
 
const MyTrailer = () => {
  return (
    <>
      <Intro />
      <Sequence from={30}>
        <Intro />
      </Sequence>
    </>
  );
};
MyTrailer.tsx
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 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> component. If you don't want this behavior, add layout="none" 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:

0
0:00 / 0:05

MyVideo.tsx
tsx
const MyVideo = () => {
  return <BlueSquare />;
};
MyVideo.tsx
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

delay.tsx
tsx
const MyVideo = () => {
  return (
    <Sequence from={30}>
      <BlueSquare />
    </Sequence>
  );
};
delay.tsx
tsx
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.

0
0:00 / 0:05

trim-end.tsx
tsx
const ClipExample: React.FC = () => {
  return (
    <Sequence durationInFrames={45}>
      <BlueSquare />
    </Sequence>
  );
};
trim-end.tsx
tsx
const ClipExample: React.FC = () => {
  return (
    <Sequence durationInFrames={45}>
      <BlueSquare />
    </Sequence>
  );
};

Trim start​

Wrap the square in <Sequence> with a negative from value to trim the beginning of the content.
By shifting the time backwards, the animation has already progressed by 15 frames when the content appears.

15
0:00 / 0:05

trim-start.tsx
tsx
const TrimStartExample: React.FC = () => {
  return (
    <Sequence from={-15}>
      <BlueSquare />
    </Sequence>
  );
};
trim-start.tsx
tsx
const TrimStartExample: React.FC = () => {
  return (
    <Sequence from={-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.

0:00 / 0:05

trim-and-delay.tsx
tsx
const TrimAndDelayExample: React.FC = () => {
  return (
    <Sequence from={30}>
      <Sequence from={-15}>
        <BlueSquare />
      </Sequence>
    </Sequence>
  );
};
trim-and-delay.tsx
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.

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​

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.

heightv4.0.80​

optional

Gives the sequence a specific style={{height: height}} style and overrides height that is returned by the useVideoConfig() hook in child components. Useful for including a component that was designed for a specific height.

widthv4.0.80​

optional

Gives the sequence a specific style={{width: width}} style and overrides width that is returned by the useVideoConfig() hook in child components. Useful for including a component that was designed for a specific width.

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

stylev3.0.27​

optional

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.

classNamev3.3.45​

optional

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.

premountForv4.0.140​

optional

Premount the sequence for a set number of frames.

showInTimelinev4.0.110​

optional

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.

Adding a ref​

You can add a React ref to an <Sequence> from version v3.2.13 on. If you use TypeScript, you need to type it with HTMLDivElement:

tsx
const MyComp = () => {
  const ref = useRef<HTMLDivElement>(null);
  return (
    <Sequence from={10} ref={ref}>
      {content}
    </Sequence>
  );
};
tsx
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>. Avoid an error by passing layout="none" to <Sequence>. Example: <Sequence layout="none">.

See also​