Creatomate
API & Integration -> Quick Start

Synchronize multiple elements

This example shows how to sync an element's duration with another. Make sure to read about the timeline to learn more.

Step 1
Start with a single element

Tracks are the horizontal lanes in your timeline where you place your elements. All tracks within a timeline have the same length, so they're useful for lining up elements.For this example, we'll start with a single 5-second video. By default, audio and video elements take the length of their input files. Because the 5-second video is the only element with a duration, the entire timeline extends to 5 seconds (and accordingly, each additional track also extends to that duration).
curl -X POST https://api.creatomate.com/v2/renders \
     -H "Content-Type: application/json" \
     -H "Authorization: Bearer YOUR_API_KEY_HERE" \
     -d '{
  "output_format": "mp4",
  "width": 1280,
  "height": 720,
  "elements": [
    {
      "type": "video",
      "track": 1,
      "source": "https://cdn.creatomate.com…/demo/5-second-video.mp4"
    }
  ]
}'

Step 2
Add an element that syncs with the video

Now let's add background music to accompany the video. We want the music to stop playing when the 5-second video ends.As mentioned in step 1, an audio element defaults to having the same length as its input file. But we don't want the music to influence the duration of the output video. Instead, the music should be cut off at the current composition's length of 5 seconds. For that reason, we explicitly set its 
duration
to 
null
.
curl -X POST https://api.creatomate.com/v2/renders \
     -H "Content-Type: application/json" \
     -H "Authorization: Bearer YOUR_API_KEY_HERE" \
     -d '{
  "output_format": "mp4",
  "width": 1280,
  "height": 720,
  "elements": [
    {
      "type": "video",
      "track": 1,
      "source": "https://cdn.creatomate.com…/demo/5-second-video.mp4"
    },
    {
      "type": "audio",
      "track": 2,
      "duration": null,
      "source": "https://cdn.creatomate.com…/demo/music1.mp3",
      "audio_fade_out": 1
    }
  ]
}'

Step 3
Add a text overlay

Next, let's add a text overlay. Unlike video or audio elements, text elements don't have an intrinsic duration, so they expand to fill their entire track by default.All three elements are now synchronized to the same 5-second timeline. The video (with its defined length) dictates the composition duration, while both the audio and text elements adapt to match it.
curl -X POST https://api.creatomate.com/v2/renders \
     -H "Content-Type: application/json" \
     -H "Authorization: Bearer YOUR_API_KEY_HERE" \
     -d '{
  "output_format": "mp4",
  "width": 1280,
  "height": 720,
  "elements": [
    {
      "type": "video",
      "track": 1,
      "source": "https://cdn.creatomate.com…/demo/5-second-video.mp4"
    },
    {
      "type": "audio",
      "track": 2,
      "duration": null,
      "source": "https://cdn.creatomate.com…/demo/music1.mp3",
      "audio_fade_out": 1
    },
    {
      "type": "text",
      "track": 3,
      "text": "This text stretches to the end.",
      "fill_color": "#ffffff",
      "stroke_color": "#000000",
      "stroke_width": "0.6 vmin"
    }
  ]
}'

Step 4
Create a sequence of videos

For our final example, let's extend the composition by adding another video to track 1. When multiple elements share the same track, they play in sequence. The second video (3 seconds long) will play immediately after the first video ends, creating a total track duration of 8 seconds.Notice how both the audio and text elements automatically expand to fill this new timeline length.
curl -X POST https://api.creatomate.com/v2/renders \
     -H "Content-Type: application/json" \
     -H "Authorization: Bearer YOUR_API_KEY_HERE" \
     -d '{
  "output_format": "mp4",
  "width": 1280,
  "height": 720,
  "elements": [
    {
      "type": "video",
      "track": 1,
      "source": "https://cdn.creatomate.com…/demo/5-second-video.mp4"
    },
    {
      "type": "video",
      "track": 1,
      "source": "https://cdn.creatomate.com…/demo/3-second-video.mp4"
    },
    {
      "type": "audio",
      "track": 2,
      "duration": null,
      "source": "https://cdn.creatomate.com…/demo/music1.mp3",
      "audio_fade_out": 1
    },
    {
      "type": "text",
      "track": 3,
      "text": "This text stretches to the end.",
      "fill_color": "#ffffff",
      "stroke_color": "#000000",
      "stroke_width": "0.6 vmin"
    }
  ]
}'

Related resources