How do I combine compositions?

Say you have two compositions, One and Two:

Root.tsx
tsx
import React from"react";
import { Composition } from"remotion";
import { One } from"./One";
import { Two } from"./Two";
exportconstRoot:React.FC= () => {
return (
 <>
 <Composition
id="One"
component={One}
width={1080}
height={1080}
fps={30}
durationInFrames={120}
 />
 <Composition
id="Two"
component={Two}
width={1080}
height={1080}
fps={30}
durationInFrames={120}
 />
 </>
 );
};

To combine them, create another component, let's call it Main:

Main.tsx
tsx
import React from"react";
import { Series } from"remotion";
import { One } from"./One";
import { Two } from"./Two";
exportconstMain:React.FC= () => {
return (
 <Series>
 <Series.SequencedurationInFrames={120}>
 <One />
 </Series.Sequence>
 <Series.SequencedurationInFrames={120}>
 <Two />
 </Series.Sequence>
 </Series>
 );
};

Then, in your Root component, add a Main composition:

Root.tsx
tsx
import React from"react";
import { Composition } from"remotion";
import { One } from"./One";
import { Two } from"./Two";
import { Main } from"./Main";
exportconstRoot:React.FC= () => {
return (
 <>
 <Composition
id="One"
component={One}
width={1080}
height={1080}
fps={30}
durationInFrames={120}
 />
 <Composition
id="Two"
component={Two}
width={1080}
height={1080}
fps={30}
durationInFrames={120}
 />
 <Composition
id="Main"
component={Main}
width={1080}
height={1080}
fps={30}
durationInFrames={240}
 />
 </>
 );
};

How do I avoid hardcoding the duration?

You can define variables alongside your components:

tsx
exportconstONE_DURATION=120;
exportconstTWO_DURATION=120;
exportconstMAIN_DURATION=ONE_DURATION+TWO_DURATION;

And then pass the variables them to <Composition> and <Series.Sequence>.

How do I transition between compositions?

You can use <TransitionSeries>. If you use it, your main composition will get shorter because for a period of time, both compositions are mounted.
Subtract the duration of the transition to get a correct timing.

How does this scale?

As more scenes are added, consider:

using calculateMetadata() to calculate the duration of a composition based on its props.
creating an array of scenes and using JavaScripts .map() function to render them.

How do I avoid hardcoding the duration?​

How do I transition between compositions?​

How does this scale?​

See also​

How do I avoid hardcoding the duration?

How do I transition between compositions?

How does this scale?

See also