<Series>
Available from v.2.3.1
Using this component, you can easily stitch together scenes that should play sequentially after another.
Example
Code
src/Example.tsxtsx
import {Series } from "remotion";constExample :React .FC = () => {return (<Series ><Series .Sequence durationInFrames ={40}><Square color ={"#3498db"} /></Series .Sequence ><Series .Sequence durationInFrames ={20}><Square color ={"#5ff332"} /></Series .Sequence ><Series .Sequence durationInFrames ={70}><Square color ={"#fdc321"} /></Series .Sequence ></Series >);};
src/Example.tsxtsx
import {Series } from "remotion";constExample :React .FC = () => {return (<Series ><Series .Sequence durationInFrames ={40}><Square color ={"#3498db"} /></Series .Sequence ><Series .Sequence durationInFrames ={20}><Square color ={"#5ff332"} /></Series .Sequence ><Series .Sequence durationInFrames ={70}><Square color ={"#fdc321"} /></Series .Sequence ></Series >);};
Result
API
The <Series />
component takes no props may only contain a list of <Series.Sequence />
instances. A <Series.Sequence />
component takes the following props:
This component is a high order component, and accepts, besides it's children, the following props:
durationInFrames
For how many frames the sequence should be displayed. Children are unmounted if they are not within the time range of display.
Only the last <Series.Sequence />
instance is allowed to have Infinity
as a duration, all previous one must have a positive integer.
offset
optional
Pass a positive number to delay the beginning of the sequence. Pass a negative number to start the sequence earlier, and to overlay the sequence with the one that comes before.
The offset does not apply to sequences that come before, but the sequences that come after it will also be shifted.
Example 1: Pass 10
to delay the sequence by 10 frames and create a blank space of 10 frames before it.
Example 2: Pass -10
to start the sequence earlier and overlay the sequence on top of the previous one for 10 frames.
layout
optional
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"
.
style
v3.3.4
optional
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
v3.3.45
optional
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.
ref
v3.3.4
optional
You can add a React ref to a <Series.Sequence>
. If you use TypeScript, you need to type it with HTMLDivElement
:
src/Example.tsxtsx
importReact , {useRef } from "react";import {Series } from "remotion";constExample :React .FC = () => {constfirst =useRef <HTMLDivElement >(null);constsecond =useRef <HTMLDivElement >(null);return (<Series ><Series .Sequence durationInFrames ={40}ref ={first }><Square color ={"#3498db"} /></Series .Sequence ><Series .Sequence durationInFrames ={20}ref ={second }><Square color ={"#5ff332"} /></Series .Sequence ><Series .Sequence durationInFrames ={70}><Square color ={"#fdc321"} /></Series .Sequence ></Series >);};
src/Example.tsxtsx
importReact , {useRef } from "react";import {Series } from "remotion";constExample :React .FC = () => {constfirst =useRef <HTMLDivElement >(null);constsecond =useRef <HTMLDivElement >(null);return (<Series ><Series .Sequence durationInFrames ={40}ref ={first }><Square color ={"#3498db"} /></Series .Sequence ><Series .Sequence durationInFrames ={20}ref ={second }><Square color ={"#5ff332"} /></Series .Sequence ><Series .Sequence durationInFrames ={70}><Square color ={"#fdc321"} /></Series .Sequence ></Series >);};