14. Conditions#

Some content only makes sense when a flag is true. We do not want the "Open House This Sunday" badge to show up on every listing — only the ones with an open house this weekend. The condition property on any element or scene controls whether it renders. Drop it on, set the flag, and the rest of the JSON stays intact.

Prerequisites: chapter 13. Conditions evaluate expressions, so review chapter 12 if anything looks unfamiliar.

Step 1 — A conditional element#

condition accepts an expression. The element renders when the expression evaluates truthy.

{
  "type": "html",
  "tailwind": true,
  "wait": 0.5,
  "html": "<div class='inline-flex px-6 py-4 rounded-xl bg-rose-600 text-white text-4xl font-bold shadow-lg'>OPEN HOUSE — SUNDAY 1–4 PM</div>",
  "position": "top-center",
  "y": 60,
  "condition": "{{ open_house }}"
}

If open_house is true, "true", or any truthy value, the badge renders. If it's false, missing, or an empty string, the element is skipped entirely — as if it were never in the JSON.

Step 2 — Add the flag at variables-level#

Declare open_house so the condition has something to read:

{
  "variables": {
    "address": "123 Oak Street",
    "open_house": true,
    "rooms": [ ... as in chapter 13 ... ]
  }
}

Flip to false to suppress the badge without touching the rest of the movie.

Step 3 — Conditional voice line#

Layer in a voice-over that runs only when there is an open house. Use a movie-level voice element with condition:

{
  "type": "voice",
  "text": "Open house this Sunday from one to four PM.",
  "voice": "en-US-EmmaMultilingualNeural",
  "start": 18,
  "condition": "{{ open_house }}"
}

start: 18 places it near the end of the iterating-room scenes (chapter 13 totals ~24 s).

Step 4 — Conditional scene#

condition also works on a whole scene. If open_house is true, add a dedicated closing scene with a wider "schedule a viewing" message; otherwise, skip it.

{
  "duration": 3,
  "transition": { "style": "fade", "duration": 0.5 },
  "condition": "{{ open_house }}",
  "elements": [
    {
      "type": "component",
      "component": "basic/000",
      "settings": { "headline": "OPEN HOUSE", "subline": "Sunday 1–4 PM" }
    }
  ]
}

Step 5 — Compose more complex conditions#

condition is a regular expression, so you can combine clauses:

{ "condition": "{{ open_house && price_number < 1000000 }}" }
{ "condition": "{{ bedrooms >= 3 }}" }
{ "condition": "{{ rooms.length > 0 }}" }

The complete final JSON#

{
  "resolution": "full-hd",
  "variables": {
    "address": "123 Oak Street",
    "open_house": true,
    "rooms": [
      { "name": "Exterior",       "image": "https://cdn.json2video.com/assets/images/sample-house-front.jpg" },
      { "name": "Chef's Kitchen", "image": "https://cdn.json2video.com/assets/images/sample-house-kitchen.jpg" },
      { "name": "Master Bedroom", "image": "https://cdn.json2video.com/assets/images/sample-house-bedroom.jpg" }
    ]
  },
  "elements": [
    {
      "type": "audio",
      "src": "https://cdn.json2video.com/assets/audios/uplifting-corporate.mp3",
      "volume": 0.4
    },
    {
      "type": "html",
      "tailwind": true,
      "wait": 0.5,
      "html": "<div class='inline-flex px-6 py-4 rounded-xl bg-rose-600 text-white text-4xl font-bold shadow-lg'>OPEN HOUSE — SUNDAY 1–4 PM</div>",
      "position": "top-center",
      "y": 60,
      "condition": "{{ open_house }}"
    },
    {
      "type": "voice",
      "text": "Open house this Sunday from one to four PM.",
      "voice": "en-US-EmmaMultilingualNeural",
      "start": 14,
      "condition": "{{ open_house }}"
    },
    {
      "type": "subtitles",
      "language": "en",
      "settings": {
        "style": "boxed-word",
        "font-family": "Inter",
        "font-size": 90,
        "font-color": "#FFFFFF",
        "position": "bottom-center",
        "all-caps": true,
        "box-color": "#0E7C66"
      }
    }
  ],
  "scenes": [
    {
      "duration": 4,
      "elements": [
        {
          "type": "component",
          "component": "basic/000",
          "settings": { "headline": "FOR SALE", "subline": "{{address}}" }
        }
      ]
    },
    {
      "duration": 4,
      "transition": { "style": "fade", "duration": 0.5 },
      "iterate": "rooms",
      "iterate-as": "room",
      "elements": [
        { "type": "image", "src": "{{ room.image }}" },
        { "type": "text", "text": "{{ room.name }}", "position": "top-left", "x": 60, "y": 60 }
      ]
    },
    {
      "duration": 3,
      "transition": { "style": "fade", "duration": 0.5 },
      "condition": "{{ open_house }}",
      "elements": [
        {
          "type": "component",
          "component": "basic/000",
          "settings": { "headline": "OPEN HOUSE", "subline": "Sunday 1–4 PM" }
        }
      ]
    }
  ]
}

Expected output#

With open_house: true: the listing now opens with a red badge across the top of every scene, plus a closing "Open House Sunday 1–4 PM" card. With open_house: false: the same JSON renders the chapter-13 listing exactly as before — no badge, no closing card, no extra voice line. Sample render: tutorial-14.mp4 (placeholder).

What you learned#

• condition on an element or a scene controls whether it renders.
• The expression is evaluated like any other {{ ... }} — booleans, comparisons, function calls all work.
• A falsy condition (false, missing, empty string, zero) skips the element/scene entirely.
• One template can switch large blocks of behaviour on or off by toggling a single variable.

Previous chapter / Next chapter#

← 13. Dynamic scenes · 15. Webhooks →