Sync up elements

When designing your template, you'll often need certain elements to line up so they start and end at the same time. The key to achieving this is setting the right durations for each element to control exactly how they interact on the timeline.

Linking two elements

Let's look at a common scenario: combining a video with background music. You want the music to match the video's duration exactly, stopping when the video ends. By default, the timeline is determined by the longest element – as shown below, the music track extends beyond Main-Video, making the entire composition longer than intended:

You can fix this by changing the Music element's duration from "Media" to "Auto". With this change, the music will no longer use its input file to determine its length. Instead, it will adjust to match the timeline's duration. Since Main-Video becomes the only element with a content-defined length, it now controls the timeline's duration, and the music will automatically end precisely when the video does:

Using compositions

The method above works well for simple scenarios. However, more complex templates, such as multiple videos each with their own music track, need a different approach.

A common mistake is to arrange elements like this on the timeline:

This approach doesn't work because, although the elements appear aligned on the timeline, they aren't linked together. The solution is to group elements that need to sync up, giving them their own timelines.

In the example below, Music-1 and Main-Video-1 are grouped into the composition Scene-1-Composition. Similarly, Music-2 and Main-Video-2 form another composition. These compositions can then be placed on the same track, allowing the scenes to play one after another: