'Action: Layer'

actionslayersvisibilitytabspanelstoggle

The Layer action controls layer visibility — showing, hiding, or toggling layers on demand. Layers group elements together, and by controlling which layers are visible, you can create tabbed interfaces, progressive disclosure, multi-step forms, and overlay panels.

Layer Operations

Show

Makes the target layer visible. All elements on that layer become visible (subject to their own conditions).

Hide

Makes the target layer hidden. All elements on that layer disappear.

Toggle

Flips the layer's visibility — if it's visible, hide it; if it's hidden, show it. Convenient for on/off panels.

Hide Others

When showing a layer, you can enable Hide Others. This automatically hides all other layers in the same scene before showing the target layer. This creates radio behaviour — only one layer is visible at a time, just like tabs.

Without Hide Others, showing a layer adds it to whatever is already visible. With Hide Others, showing a layer replaces what's visible.

Scope: Local vs Global

  • Local (default): Only the triggering user's view changes. Each participant can explore different tabs or panels independently.
  • Global: Everyone's view changes. When the host shows a layer, all participants see it. Requires moderator or higher permissions.

Common Patterns

Tab Interface

  1. Create three layers: "Tab 1", "Tab 2", "Tab 3"
  2. Place different content on each layer
  3. Create three tab buttons (shapes with text)
  4. On each button's click: Layer action → Show target layer, with Hide Others enabled

Participants click a tab and see only that tab's content. Clean, familiar, and intuitive.

Overlay Panel

  1. Create a layer called "Details Panel"
  2. Place your panel content on it (a semi-transparent background shape, text, images)
  3. On an "Info" button click: Layer action → Show "Details Panel"
  4. On a "Close" button (inside the panel) click: Layer action → Hide "Details Panel"

Progressive Disclosure

  1. Create layers for each step: "Step 1", "Step 2", "Step 3"
  2. Show "Step 1" by default
  3. On the "Continue" button in Step 1: Show "Step 2" with Hide Others
  4. On the "Continue" button in Step 2: Show "Step 3" with Hide Others

Conditional Content

Combine layers with variable conditions:

  • On correct answer: Show "Success" layer
  • On incorrect answer: Show "Try Again" layer
  • Use conditions on the actions to check $score or $attempts

Tips

  • Layers vs Scenes: Use layers for content that coexists within the same layout (tabs, panels, overlays). Use scenes for entirely different layouts or pages.
  • Default visibility: Set a layer's initial visibility in the editor. If you want a layer hidden on load, toggle it off in the layers panel.
  • Combine with variables: Use visibleWhen on elements within a layer for even finer control. The layer must be visible AND the condition must be met for the element to show.

What's Next?

  • States System — change individual element appearance without showing/hiding entire layers
  • Scene Switch — for full page-level navigation