sequencing

Use `` to delay when an element appears in the timeline.

const {fps} = useVideoConfig();

  

  

This will by default wrap the component in an absolute fill element. If the items should not be wrapped, use the layout prop:

Premounting

This loads the component in the timeline before it is actually played. Always premount any ``!

Series

Use `` when elements should play one after another without overlap.

  <Series.Sequence durationInFrames={45}>
    
  </Series.Sequence>
  <Series.Sequence durationInFrames={60}>
    
  </Series.Sequence>
  <Series.Sequence durationInFrames={30}>
    
  </Series.Sequence>
;

Same as with ``, the items will be wrapped in an absolute fill element by default when using <Series.Sequence>, unless the layout prop is set to none.

Series with overlaps

Use negative offset for overlapping sequences:

  <Series.Sequence durationInFrames={60}>
    
  </Series.Sequence>
  <Series.Sequence offset={-15} durationInFrames={60}>
    
    
  </Series.Sequence>

Frame References Inside Sequences

Inside a Sequence, useCurrentFrame() returns the local frame (starting from 0):

Nested Sequences

Sequences can be nested for complex timing: