Skip to main content

Sequence

<Sequence> is a built-in component in Remotion that:

  • Absolutely positions content
  • Allows you to time-shift elements

Think of it as the equivalent of a "layer" in After Effects or Photoshop.
Not to be confused with <Composition>.

Layouting​

A <Sequence> by default will also be absolutely positioned in the DOM, so you can use it to overlay elements on top of each other.

Time-shifting​

Consider an element which starts animating at frame 0.
If you would like to delay the animation, rather than refactoring the animation, you can wrap it in a <Sequence> and define a delay using the from prop.

Using a sequence, you can also trim the start and end of an animation by passing the durationInFrames prop.