packages/docs/docs/sequence.mdx
import {SequenceForwardExample} from '../components/SequenceExamples/SequenceForward';
const BlueSquare: React.FC = () => <div></div>
// - BlueSquare
By using a sequence, you can time-shift the display of your components or parts of your animation in the video.
import {Sequence} from 'remotion';
export const Intro = () => <></>;
export const Clip = () => <></>;
export const Outro = () => <></>;
// ---cut---
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 until frame 59.<Outro> will show 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.
import {Sequence, useCurrentFrame} from 'remotion';
const Intro = () => <div>{useCurrentFrame()}</div>;
const MyTrailer = () => {
return (
<>
<Intro />
<Sequence from={30}>
<Intro />
</Sequence>
</>
);
};
0, this would render <div>0</div>.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.
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.
All the examples below are based on the following animation of a blue square:
<SequenceForwardExample type="base" />// @include: example-BlueSquare
// ---cut---
const MyVideo = () => {
return <BlueSquare />;
};
If you would like to delay the content by say 30 frames, you can wrap it in
<Sequence from={30}>.
// @include: example-BlueSquare
import {Sequence} from 'remotion';
// ---cut---
const MyVideo = () => {
return (
<Sequence from={30}>
<BlueSquare />
</Sequence>
);
};
Wrap your component in a <Sequence> with a finite durationInFrames prop to make it unmount after the duration has passed.
// @include: example-BlueSquare
import {Sequence} from 'remotion';
// ---cut---
const ClipExample: React.FC = () => {
return (
<Sequence durationInFrames={45}>
<BlueSquare />
</Sequence>
);
};
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.
const TrimStartExample: React.FC = () => {
return (
<Sequence from={-15}>
<BlueSquare />
</Sequence>
);
};
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.
// @include: example-BlueSquare
import {Sequence} from 'remotion';
// ---cut---
const TrimAndDelayExample: React.FC = () => {
return (
<Sequence from={30}>
<Sequence from={-15}>
<BlueSquare />
</Sequence>
</Sequence>
);
};
See the <Series /> helper component, which helps you calculate markup that makes sequences play after each other.
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?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.
height?<AvailableFrom v="4.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?<AvailableFrom v="4.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.
style?<AvailableFrom v="3.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?<AvailableFrom v="3.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?<AvailableFrom v="4.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?<AvailableFrom v="4.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?<AvailableFrom v="4.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.
showInTimeline?<AvailableFrom v="4.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?<AvailableFrom v="4.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.
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:
import {useRef} from 'react';
import {Sequence} from 'remotion';
const content = <div>Hello, World</div>;
// ---cut---
const MyComp = () => {
const ref = useRef<HTMLDivElement>(null);
return (
<Sequence from={10} ref={ref}>
{content}
</Sequence>
);
};
@remotion/threeA <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">.