Guideline for Component Positioning in Timeline (use cases: add delay/gap between sequences, Audio positioning,...)

[mnlbox]

Hi,

I have a composition contains multiple sequences. Now I need to add 5 frame gap between each sequences. I know I can do it with the combination of durationInFrame or from props but for that I need to do lot's of calculation for each sequence.
Is there any easier way to add this 5 frame gap between each sequences?
Is there any helper or component available for this type of use cases to position each sequence in the video timeline?

[mnlbox]

I think I need to learn how to position each component in the timeline in general then I can solve the gap issue that I have and I mentioned in the previous comment too. Because now I have same problem again about positioning <Audio> components. I have a peace of code like this:

{videoData.rows.voices.map((voice, index) => (
    <Audio
        key={index}
        src={staticFile(voice.path)}
        autoPlay={currentVoiceIndex === index}
    />
))}

But in the timeline all of them started at same position, while I need to play them in sequence. Do I need to create separate sequence component for each one of my <Audio> components here?

[mnlbox]

OK after doing more research I found Series components here from Remotion package useful for my use-case, I guess I can use it for positioning and add gap as it has an offset property.

But It seems durationInFrames is mandatory for <Series.Sequence> component. So I have to calculate the <Audio> duration and pass it to the <Series.Sequence> component. I tried something like this:

<Series>
    {videoData.rows.voices.map(
        async (voice, index) => {
            const audioData = await getAudioData(staticFile(voice.path));
            const durationInSeconds = audioData.durationInSeconds;
            const durationInFrame = Math.round(durationInSeconds * fps);

            return (
                <Series.Sequence durationInFrames={durationInFrame} key={index}>
                    <Audio src={staticFile(voice.path)} />
                </Series.Sequence>
            );
        },
    )}
</Series>

But as getAudioData is an async function, it's not working. Trying to solve this issue now...

[mnlbox]

OK I managed to fix that using <Series.Sequence> the only problem is that for each sequence one track created so in general it looks like a waterfall:

So I don't know if <Series.Sequence> is the right way for my use-case or not?
Maybe related: https://github.com/orgs/remotion-dev/discussions/3111

[JonnyBurger]

You can indeed use an empty <Series.Sequence> to create gaps.

Or actually leverage the offset property of it (with a negative value I think should work)!

There is also showInTimeline={false} that you can add to any Sequence, and should work as well for <Series.Sequence> I believe.

[mnlbox]

Thanks @JonnyBurger For your reply.

I have the timeline bellow:

I tried showInTimeline={false} prop as bellow:

<Sequence
    from={title.durationInFrames}
    durationInFrames={intro.durationInFrames}
    showInTimeline={false}>
        <Audio src={staticFile("/intro.mp3")} />
</Sequence>

But it still shows the Audio there, This is my timeline after showInTimeline={false}:

Is it normal or it's a bug? 🤔

I still think having an ability to have multiple sequences from same <Series> component in a single track can be a nice feature, something like this:

[JonnyBurger]

We'll add a new showInTimeline props to all media tags: #3550

Remotion's timeline works more like the one in After Effects or Photoshop, it is not conceptually the same as a timeline in a normal video editing program.