Skip to main content

<Sequence>

<Sequence> is the base component for placing content on the timeline.
It provides timing props such as from, durationInFrames and trimBefore.

These components use the same timing props:

See Timing and trimming for examples of using these props directly on components.

Make a component inherit from Sequence​

Wrap a custom component with Interactive.withSchema() to give it the timing props listed below.
You can then set those props directly on the component, and Studio shows it as a single timeline layer.
See the linked API page for an example.

Using <Sequence> directly​

It is not recommended anymore to use <Sequence> directly, but it is possible.
You will see this often in legacy Remotion code.

SequenceExample.tsx
import {Sequence} from 'remotion';

const SequenceExample = () => {
  return (
    <>
      <Sequence durationInFrames={30}>
        <div>Intro</div>
      </Sequence>
      <Sequence from={30} durationInFrames={30}>
        <div>Clip</div>
      </Sequence>
      <Sequence from={60}>
        <div>Outro</div>
      </Sequence>
    </>
  );
};
  • Intro shows from frame 0–29.
  • Clip shows from frame 30 through frame 59.
  • Outro shows from frame 60 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
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.

Props​

<Sequence> accepts children and the following props.
Custom components built with Interactive.withSchema() also receive timing 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 of the child timeline the sequence should be displayed, starting at trimBefore.
By default it will be Infinity to avoid limiting the duration of the sequence.

The sequence occupies durationInFrames / playbackRate frames in its parent.
When loop is enabled, durationInFrames is the loop length and the sequence repeats until its parent ends.

trimBefore?v4.0.482​

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

The sequence still starts at from, but children using useCurrentFrame() receive a frame that is advanced by trimBefore.

MyVideo.tsx
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.

loop?​

Repeats the child range selected by trimBefore and durationInFrames until the parent ends.
Default: false.

Requires a finite durationInFrames, because a sequence has no intrinsic duration.
Each cycle lasts durationInFrames / playbackRate frames in the parent timeline.
Wrap it in an outer <Sequence> to set a finite total duration.

MyVideo.tsx
export const MyVideo = () => {
  return (
    <Sequence durationInFrames={90}>
      <Sequence trimBefore={30} playbackRate={2} durationInFrames={30} loop>
        <Child />
      </Sequence>
    </Sequence>
  );
};

In the example above, Child receives frames 30 through 59 in a cycle of 15 composition frames, repeated six times.

Loop.useLoop() returns the current iteration inside a looping sequence.
To repeat a duration measured in the parent timeline, use <Loop>.

playbackRate?v4.0.528​

Changes the speed of the children, including their animations and media.
Default: 1.
Use 2 for double speed or 0.5 for half speed.
The value must be positive and finite, and must remain constant across frames.

durationInFrames and trimBefore are measured in the child timeline, so changing playbackRate changes the mounted duration.

MyVideo.tsx
import {Sequence, useCurrentFrame} from 'remotion';

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

export const MyVideo = () => (
  <Sequence from={30} durationInFrames={60} trimBefore={10} playbackRate={2}>
    <Child />
  </Sequence>
);

At composition frame 30, Child receives frame 10.
At frame 40, it receives frame 30: (40 - 30) * 2 + 10.
The sequence remains visible through composition frame 59.

Nested playback rates multiply.
A sequence with playbackRate={2} inside one with playbackRate={0.5} plays at the original speed.
A media component's own playbackRate also multiplies with its parent sequences' rates.

The rate applies to useCurrentFrame() called inside descendant components.
Animations calculated in the parent and passed as the sequence's style or as child props keep the parent's clock.

See Order of operations for how the timing props combine.

freeze?v4.0.476​

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

MyVideo.tsx

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

This is equivalent to wrapping the children in <Freeze frame={20}>, but without remounting the sequence.

height?v4.0.80​

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.

width?v4.0.80​

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

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.

cropLeft?v4.0.500​

Crops the Sequence from the left edge without changing its size or transform origin.
The value is a ratio between 0 and 1: 0 does not crop the edge, while 1 crops the full width.

cropRight?v4.0.500​

Like cropLeft, but crops from the right edge.

If cropLeft and cropRight overlap, both edges meet in the center.

cropTop?v4.0.500​

Like cropLeft, but crops the height from the top edge.

cropBottom?v4.0.500​

Like cropTop, but crops from the bottom edge.

If cropTop and cropBottom overlap, both edges meet in the center.

All four crop props are only supported with layout="absolute-fill" and can be animated:

note

If inline border-radius styles are set using style.borderRadius or its four corner longhands, the cropped rectangle uses the same corner radii.
Border radii applied through a CSS class are not inherited by the crop.

MyVideo.tsx
import {interpolate, Sequence, useCurrentFrame} from 'remotion';

export const MyVideo = () => {
  const frame = useCurrentFrame();
  const cropLeft = interpolate(frame, [0, 30], [0, 0.5], {
    extrapolateRight: 'clamp',
  });

  return (
    <Sequence cropLeft={cropLeft}>
      <div>Revealed from the left</div>
    </Sequence>
  );
};

outlineRef?v4.0.479​

Deprecated

Remotion Studio discovers selection outlines automatically.
Remove this prop.

By default, the Studio outlines the wrapper created by <Sequence>.
With layout="none", it outlines the rendered element or the bounds of multiple rendered roots.

style?v3.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?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. From v5.0, the default value changes from 0 to fps (1 second).

postmountFor?v4.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?v4.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.

styleWhilePostmounted?v4.0.340​

CSS styles to be applied to the container while the sequence is postmounted.
The style is still applied, but styleWhilePostmounted can override properties.
Defaults to no overrides.

showInTimeline?v4.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?v4.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 to a <Sequence> from version v3.2.13 on, if the sequence does not use layout="none".
If you use TypeScript, you need to type it with HTMLDivElement:

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

Compatibility​

BrowsersEnvironments
Chrome
Firefox
Safari

See also​