3. Multiple scenes & transitions#

So far the listing lives inside a single scene. Real videos cut between scenes — exterior, kitchen, bedroom — and use transitions to smooth those cuts. This chapter introduces the scene boundary, scene-level duration, and the transition property.

Prerequisites: chapter 2. You should know how images, videos, and audio elements work, and how start/duration sequence elements inside a scene.

Step 1 — Promote each photo to its own scene#

In chapter 2 every photo was an element inside one giant scene. Here we split the content into three scenes — one per room. Each scene gets its own elements array and its own duration.

{
  "resolution": "full-hd",
  "scenes": [
    {
      "duration": 4,
      "elements": [
        {
          "type": "image",
          "src": "https://cdn.json2video.com/assets/images/sample-house-front.jpg"
        },
        { "type": "text", "text": "Exterior" }
      ]
    },
    {
      "duration": 4,
      "elements": [
        {
          "type": "image",
          "src": "https://cdn.json2video.com/assets/images/sample-house-kitchen.jpg"
        },
        { "type": "text", "text": "Chef's Kitchen" }
      ]
    },
    {
      "duration": 4,
      "elements": [
        {
          "type": "image",
          "src": "https://cdn.json2video.com/assets/images/sample-house-bedroom.jpg"
        },
        { "type": "text", "text": "Master Bedroom" }
      ]
    }
  ]
}

Scenes run sequentially. Total length here is 12 s (4 + 4 + 4). Scene-level duration overrides element-level duration for elements that omit theirs.

Note — within a single scene the timeline is local to the scene. start: 0 inside scene 2 means "0 s after scene 2 begins", not "0 s into the movie".

Step 2 — Add a transition between scenes#

Each scene can define a transition object describing how it enters from the previous one. The most common is a fade. The shape of a scene becomes:

{
  "duration": 4,
  "transition": { "style": "fade", "duration": 0.5 },
  "elements": [ ... ]
}

The transition runs at the start of the scene and overlaps with the previous one. With duration: 0.5 the fade-in lasts half a second.

{
  "resolution": "full-hd",
  "scenes": [
    {
      "duration": 4,
      "elements": [
        {
          "type": "image",
          "src": "https://cdn.json2video.com/assets/images/sample-house-front.jpg"
        },
        { "type": "text", "text": "Exterior" }
      ]
    },
    {
      "duration": 4,
      "transition": { "style": "fade", "duration": 0.5 },
      "elements": [
        {
          "type": "image",
          "src": "https://cdn.json2video.com/assets/images/sample-house-kitchen.jpg"
        },
        { "type": "text", "text": "Chef's Kitchen" }
      ]
    },
    {
      "duration": 4,
      "transition": { "style": "fade", "duration": 0.5 },
      "elements": [
        {
          "type": "image",
          "src": "https://cdn.json2video.com/assets/images/sample-house-bedroom.jpg"
        },
        { "type": "text", "text": "Master Bedroom" }
      ]
    }
  ]
}

The first scene gets no transition because it has nothing to fade from.

Step 3 — Keep the background music#

The music track from chapter 2 was movie-level and spans the whole timeline automatically — it does not care about scene boundaries. Add it back:

{
  "resolution": "full-hd",
  "elements": [
    {
      "type": "audio",
      "src": "https://cdn.json2video.com/assets/audios/uplifting-corporate.mp3",
      "volume": 0.4
    }
  ],
  "scenes": [ ... 3 scenes as above ... ]
}

The complete final JSON#

{
  "resolution": "full-hd",
  "elements": [
    {
      "type": "audio",
      "src": "https://cdn.json2video.com/assets/audios/uplifting-corporate.mp3",
      "volume": 0.4
    }
  ],
  "scenes": [
    {
      "duration": 4,
      "elements": [
        {
          "type": "image",
          "src": "https://cdn.json2video.com/assets/images/sample-house-front.jpg"
        },
        { "type": "text", "text": "Exterior" }
      ]
    },
    {
      "duration": 4,
      "transition": { "style": "fade", "duration": 0.5 },
      "elements": [
        {
          "type": "image",
          "src": "https://cdn.json2video.com/assets/images/sample-house-kitchen.jpg"
        },
        { "type": "text", "text": "Chef's Kitchen" }
      ]
    },
    {
      "duration": 4,
      "transition": { "style": "fade", "duration": 0.5 },
      "elements": [
        {
          "type": "image",
          "src": "https://cdn.json2video.com/assets/images/sample-house-bedroom.jpg"
        },
        { "type": "text", "text": "Master Bedroom" }
      ]
    }
  ]
}

Expected output#

A 12-second 1920×1080 MP4 showing three rooms — exterior (4 s) → kitchen (4 s, fades in) → bedroom (4 s, fades in) — with background music throughout. Sample render: tutorial-03.mp4 (placeholder).

What you learned#

• A movie can have multiple scenes; scenes run sequentially.
• Scene-level duration applies to all elements in the scene that omit their own.
• transition sits on a scene and describes how it enters from the previous one.
• Movie-level elements (like background music) span every scene automatically.
• Inside a scene, start: 0 means "scene-local 0", not "movie-local 0".

Going further#

Other transition styles include slide, zoom, wipe, and circle. See the Scene reference for the full list.

Previous chapter / Next chapter#

← 2. Images, videos & audios · 4. Text & styling →