> What is Transition Logic, and how do Scenes enable state-based graphics in SPX? Transition Logic is a concept in live graphics which can be defined as "2 or more graphics which share a *state* and *reacts* to change in another. To understand how we can implement such group of graphics, we have split the idea into 2 main ideas, a Scene and Transition Logic --- ## Scene For a group of templates to function with transition logic, we use a structure and concept we call **Scenes**.  A Scene can be defined as "a set of rules and structure to follow, that enables multiple graphics to function together: ie. a graphic pack with transition logic" This is a concept and a structure developed by SPX and is not officially part of [[Documentation/Graphic Templates/Formats/OGraf|OGraf]]. But the Scene concept is compatible with any OGraf compatible tool and we are pushing this to be the standard > [!info] > Everything on this page is implemented as a OGraf but the same concepts can be applied to SPX templates ![[training material - OGraf Scene - enables state-based transition logic.jpg]] > Conceptual diagram of the Scene approach Scenes are made up of 3 components: 1. **Scene** 2. **Scene Actions** 3. **Scene Item Controller** These components work together to enable a state-based transition logic. We will look into each of these components to get a better understand of the structure. ### 1. Scene The Scene component is where the structure of the scene is defined, as well as connecting to **Key Files:** * `_scene.mjs` - Core scene logic and imports * `_scene.ograf.json` - Scene configuration and OGraf compliance definitions * `_scene.html` - DOM structure definition > [!note] > the underscore hides the template from the UI as these are not meant to be operated **Primary Functions:** * Imports `scene.html` into an iframe for isolated rendering * Connects to `_scene.mjs` for logic and OGraf compliance * Defines the DOM structure for the scene ### 2. Scene Item Controller (Controller) The scene item controller serves as the "trigger" which is actually loaded into SPX and is operated like any other graphic. * Defines the [[Documentation/Graphic Templates/Formats/HTML#Template Definition|template definition]] for OGraf and vendor specific options * On load, it checks whether scenes are properly loaded before execution **Key Files:** * `item.mjs` - Defines OGraf-required actions and custom functions as needed * `item.ograf.json` - Contains the OGraf manifest and vendor-specific field definitions ### 3. Scene Actions Scene actions contains the meat of the logic including animations, functions, transitions, etc. Each controller uses functions defined here to **Key Files:** * `scene-actions.js` - Central definition file for all scene actions **Purpose:** * Provides a comprehensive registry of available scene actions * Ensures consistent action definitions across the application * Acts as a bridge between the scene item controller and the scene itself ![[2025-11-06_11-04-56.mp4]] > example of transition logic using the Scene approach. ![[scene-format.png]] > Flowchart of how a scene ## Transition Logic As explained in the beginning, we define transition logic as "2 or more graphics which share a *state* and *reacts* to change in another" We can further break down this into 2 categories, a multi-item transition and a single-item transition. ### Multi-Item Transition This is a type of transition where one *[[Documentation/Renderer/Layers|layer]]* of graphics affects the state of another layer. In practice, this usually means that one graphic somehow shifts the **layout** of other graphics. This is usually what people mean when they speak about transition logic. ![[multi-item-transition.mp4]] ### Single-Item Transition This is a type of transition where one graphic affects the state of another graphic in the same *layer*. In practice, this usually means that one graphic somehow changes the **content** of another graphic which occupies the same layer. This is also referred to as a "Switch Animation". ![[single-item-transition.mp4]] --- ## Read Next - [[Documentation/Graphic Templates/Formats/OGraf|OGraf Templates]] - EBU standard format - [[Documentation/Graphic Templates/Formats/HTML|HTML Templates]] - Detailed HTML template guide - [[Documentation/Graphics Controller/Project Settings|Project Settings]] - Configure templates per project - [[Documentation/Renderer/Layers|Layers]] - Understanding layer management