Creatomate
API & Integration -> Quick Start

Group elements into scenes

This example shows how to group elements into scenes in order to have them act as a single entity on the timeline.

Step 1
Create the first scene

We'll start off with a voice-over and an image. Because we're not explicitly specifying a duration, the voice-over sets the composition length.By default, an image element extends the length of its composition. This means the image and voice-over are now synchronized. This will be the opening scene.
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": 720,
  "height": 1280,
  "elements": [
    {
      "type": "audio",
      "source": "https://cdn.creatomate.com…/demo/voiceover-1.mp3"
    },
    {
      "type": "image",
      "source": "https://cdn.creatomate.com…/demo/better-sleep-1.jpg"
    }
  ]
}'

Step 2
Group the elements together

To create multiple scenes in sequence, we first need to organize our elements. Grouping the voiceover and image into a composition creates a single unit that functions as a scene.This grouping ensures these elements stay linked together, maintaining their relationship as we add more content to our video.
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": 720,
  "height": 1280,
  "elements": [
    {
      "type": "composition",
      "elements": [
        {
          "type": "audio",
          "source": "https://cdn.creatomate.com…/demo/voiceover-1.mp3"
        },
        {
          "type": "image",
          "source": "https://cdn.creatomate.com…/demo/better-sleep-1.jpg"
        }
      ]
    }
  ]
}'

Step 3
Append the second scene

Now we can add a second scene with its own voiceover and background image. Like the first scene, these elements are grouped in their own composition to keep them connected.By placing both scene compositions on the same track, they play in sequence. The second scene begins immediately after the first scene ends, creating a seamless transition.
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": 720,
  "height": 1280,
  "elements": [
    {
      "type": "composition",
      "track": 1,
      "elements": [
        {
          "type": "audio",
          "source": "https://cdn.creatomate.com…/demo/voiceover-1.mp3"
        },
        {
          "type": "image",
          "source": "https://cdn.creatomate.com…/demo/better-sleep-1.jpg"
        }
      ]
    },
    {
      "type": "composition",
      "track": 1,
      "elements": [
        {
          "type": "audio",
          "source": "https://cdn.creatomate.com…/demo/voiceover-2.mp3"
        },
        {
          "type": "image",
          "source": "https://cdn.creatomate.com…/demo/better-sleep-2.jpg"
        }
      ]
    }
  ]
}'

Step 4
Add a logo overlay

For this final example, we'll add a logo to appear throughout the entire video. This element is added outside of the scene compositions.Given that the logo isn't part of either scene composition, it appears as an overlay during both scenes.
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": 720,
  "height": 1280,
  "elements": [
    {
      "type": "composition",
      "track": 1,
      "elements": [
        {
          "type": "audio",
          "source": "https://cdn.creatomate.com…/demo/voiceover-1.mp3"
        },
        {
          "type": "image",
          "source": "https://cdn.creatomate.com…/demo/better-sleep-1.jpg"
        }
      ]
    },
    {
      "type": "composition",
      "track": 1,
      "elements": [
        {
          "type": "audio",
          "source": "https://cdn.creatomate.com…/demo/voiceover-2.mp3"
        },
        {
          "type": "image",
          "source": "https://cdn.creatomate.com…/demo/better-sleep-2.jpg"
        }
      ]
    },
    {
      "type": "image",
      "y": "10%",
      "width": "50%",
      "height": "10%",
      "source": "https://cdn.creatomate.com…/demo/logo.png",
      "fit": "contain",
      "shadow_color": "rgba(0,0,0,0.5)"
    }
  ]
}'

Related resources