Creatomate
API & Integration -> Quick Start

Distribute elements over time

This example shows how to evenly distribute a series of elements across the timeline using RenderScript.

Step 1
Start with the main content

As a starting point, we'll start with an audio element that acts as our main content. We'll use a music file with a length of exactly 22 seconds.The goal is to add a series of background images evenly spaced across the music.
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": "audio",
      "source": "https://cdn.creatomate.com…/demo/music1.mp3"
    }
  ]
}'

Step 2
Add the background images

Next, we'll add the images. Because we want to play these images in sequence, they are placed on the same track (track 1). To make the elements distribute equally over the track, we use a fractional duration.Setting the duration to 
1 fr
means that each element takes an equal portion relative to other elements on the same track. In other words, because there are 3 images, and each element takes up 1 fraction, each image occupies 1/3 of the track's total 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": "audio",
      "source": "https://cdn.creatomate.com…/demo/music1.mp3"
    },
    {
      "type": "image",
      "track": 1,
      "duration": "1 fr",
      "source": "https://cdn.creatomate.com…/demo/image1.jpg"
    },
    {
      "type": "image",
      "track": 1,
      "duration": "1 fr",
      "source": "https://cdn.creatomate.com…/demo/image2.jpg"
    },
    {
      "type": "image",
      "track": 1,
      "duration": "1 fr",
      "source": "https://cdn.creatomate.com…/demo/image3.jpg"
    }
  ]
}'

Step 3
Enable looping for video elements

The same concepts apply when using video elements, but make sure they're set to loop – otherwise, the video may not be able to run for its specified duration.You can observe the loop in action in each clip; each file lasts only three seconds, so the videos are repeated to cover their fractional 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": "audio",
      "source": "https://cdn.creatomate.com…/demo/music1.mp3"
    },
    {
      "type": "video",
      "track": 1,
      "duration": "1 fr",
      "loop": true,
      "source": "https://cdn.creatomate.com…/demo/video1.mp4"
    },
    {
      "type": "video",
      "track": 1,
      "duration": "1 fr",
      "loop": true,
      "source": "https://cdn.creatomate.com…/demo/video2.mp4"
    },
    {
      "type": "video",
      "track": 1,
      "duration": "1 fr",
      "loop": true,
      "source": "https://cdn.creatomate.com…/demo/video3.mp4"
    }
  ]
}'

Related resources