1---
2name: sequencing
3description: Sequencing patterns for Remotion - delay, trim, limit duration of items
4metadata:
5  tags: sequence, series, timing, delay, trim
6---
7 
8Use `<Sequence>` to delay when an element appears in the timeline.
9 
10```tsx
11import { Sequence } from "remotion";
12 
13export const Title = () => {
14  const frame = useCurrentFrame();
15  const { fps } = useVideoConfig();
16 
17  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
18    extrapolateRight: "clamp",
19    extrapolateLeft: "clamp",
20    easing: Easing.bezier(0.16, 1, 0.3, 1),
21  });
22 
23  return <div style={{ opacity }}>Title</div>;
24};
25 
26export const Subtitle = () => {
27  return <div>Subtitle</div>;
28};
29 
30const Main = () => {
31  const {fps} = useVideoConfig();
32 
33  return (
34    <AbsoluteFill>
35      <Sequence>
36        <Background />
37      </Sequence>
38      <Sequence from={1 * fps} durationInFrames={2 * fps} layout="none">
39        <Title />
40      </Sequence>
41      <Sequence from={2 * fps} durationInFrames={2 * fps} layout="none">
42        <Subtitle />
43      </Sequence>
44    </AbsoluteFill>
45  );
46}
47```
48 
49This will by default wrap the component in an absolute fill element.  
50If the items should not be wrapped, use the `layout` prop:
51 
52```tsx
53<Sequence layout="none">
54  <Title />
55</Sequence>
56```
57 
58## Premounting
59 
60This loads the component in the timeline before it is actually played.  
61Always premount any `<Sequence>`!
62 
63```tsx
64<Sequence premountFor={1 * fps}>
65  <Title />
66</Sequence>
67```
68 
69## Series
70 
71Use `<Series>` when elements should play one after another without overlap.
72 
73```tsx
74import { Series } from "remotion";
75 
76<Series>
77  <Series.Sequence durationInFrames={45}>
78    <Intro />
79  </Series.Sequence>
80  <Series.Sequence durationInFrames={60}>
81    <MainContent />
82  </Series.Sequence>
83  <Series.Sequence durationInFrames={30}>
84    <Outro />
85  </Series.Sequence>
86</Series>;
87```
88 
89Same as with `<Sequence>`, the items will be wrapped in an absolute fill element by default when using `<Series.Sequence>`, unless the `layout` prop is set to `none`.
90 
91### Series with overlaps
92 
93Use negative offset for overlapping sequences:
94 
95```tsx
96<Series>
97  <Series.Sequence durationInFrames={60}>
98    <SceneA />
99  </Series.Sequence>
100  <Series.Sequence offset={-15} durationInFrames={60}>
101    {/* Starts 15 frames before SceneA ends */}
102    <SceneB />
103  </Series.Sequence>
104</Series>
105```
106 
107## Frame References Inside Sequences
108 
109Inside a Sequence, `useCurrentFrame()` returns the local frame (starting from 0):
110 
111```tsx
112<Sequence from={60} durationInFrames={30}>
113  <MyComponent />
114  {/* Inside MyComponent, useCurrentFrame() returns 0-29, not 60-89 */}
115</Sequence>
116```
117 
118## Nested Sequences
119 
120Sequences can be nested for complex timing:
121 
122```tsx
123<Sequence from={0} durationInFrames={120}>
124  <Background />
125  <Sequence from={15} durationInFrames={90} layout="none">
126    <Title />
127  </Sequence>
128  <Sequence from={45} durationInFrames={60} layout="none">
129    <Subtitle />
130  </Sequence>
131</Sequence>
132```
133 
134## Nesting compositions within another
135 
136To add a composition within another composition, you can use the `<Sequence>` component with a `width` and `height` prop to specify the size of the composition.
137 
138```tsx
139<AbsoluteFill>
140  <Sequence width={COMPOSITION_WIDTH} height={COMPOSITION_HEIGHT}>
141    <CompositionComponent />
142  </Sequence>
143</AbsoluteFill>
144```
145