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 
13const {fps} = useVideoConfig();
14 
15<Sequence from={1 * fps} durationInFrames={2 * fps} premountFor={1 * fps}>
16  <Title />
17</Sequence>
18<Sequence from={2 * fps} durationInFrames={2 * fps} premountFor={1 * fps}>
19  <Subtitle />
20</Sequence>
21```
22 
23This will by default wrap the component in an absolute fill element.  
24If the items should not be wrapped, use the `layout` prop:
25 
26```tsx
27<Sequence layout="none">
28  <Title />
29</Sequence>
30```
31 
32## Premounting
33 
34This loads the component in the timeline before it is actually played.  
35Always premount any `<Sequence>`!
36 
37```tsx
38<Sequence premountFor={1 * fps}>
39  <Title />
40</Sequence>
41```
42 
43## Series
44 
45Use `<Series>` when elements should play one after another without overlap.
46 
47```tsx
48import { Series } from "remotion";
49 
50<Series>
51  <Series.Sequence durationInFrames={45}>
52    <Intro />
53  </Series.Sequence>
54  <Series.Sequence durationInFrames={60}>
55    <MainContent />
56  </Series.Sequence>
57  <Series.Sequence durationInFrames={30}>
58    <Outro />
59  </Series.Sequence>
60</Series>;
61```
62 
63Same 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`.
64 
65### Series with overlaps
66 
67Use negative offset for overlapping sequences:
68 
69```tsx
70<Series>
71  <Series.Sequence durationInFrames={60}>
72    <SceneA />
73  </Series.Sequence>
74  <Series.Sequence offset={-15} durationInFrames={60}>
75    {/* Starts 15 frames before SceneA ends */}
76    <SceneB />
77  </Series.Sequence>
78</Series>
79```
80 
81## Frame References Inside Sequences
82 
83Inside a Sequence, `useCurrentFrame()` returns the local frame (starting from 0):
84 
85```tsx
86<Sequence from={60} durationInFrames={30}>
87  <MyComponent />
88  {/* Inside MyComponent, useCurrentFrame() returns 0-29, not 60-89 */}
89</Sequence>
90```
91 
92## Nested Sequences
93 
94Sequences can be nested for complex timing:
95 
96```tsx
97<Sequence from={0} durationInFrames={120}>
98  <Background />
99  <Sequence from={15} durationInFrames={90} layout="none">
100    <Title />
101  </Sequence>
102  <Sequence from={45} durationInFrames={60} layout="none">
103    <Subtitle />
104  </Sequence>
105</Sequence>
106```
107 
108## Nesting compositions within another
109 
110To 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.
111 
112```tsx
113<AbsoluteFill>
114  <Sequence width={COMPOSITION_WIDTH} height={COMPOSITION_HEIGHT}>
115    <CompositionComponent />
116  </Sequence>
117</AbsoluteFill>
118```
119