Logic Blocks

When building a skin, sometimes you need a little more control over how elements react to user input or other events. Logic Blocks will, for example, allow you to target a specific element to scale to a specific size depending on the player's width, creating a responsive skin.

What is a Logic Block

Logic blocks are a way of automatically altering values of skin elements, making it possible to react to certain circumstances – using logic. These value changes can be activated by a wide range of triggers, from window size to user interactions, events from the panorama player, and much more.

Logic blocks can be applied to any skin element. Element properties that can have logic blocks will have an arrow button next to their name in the properties panel. If the element has a logic block applied the arrow will be orange, otherwise it is gray. To add a logic block, just click the gray arrow.

Logic block applied
Logic block applied

A logic block consists of expressions. Each expression consists of conditions. You can have multiple expressions in a logic block and you can have multiple conditions in an expression.

Logic Block with a single expression containing a single condition
Logic Block with a single expression containing a single condition

Default Value

The Default Value is whatever was set in the properties panel of that property. In the above image, the logic block was applied to the Visible property and is set to false. That element is initially not visible. It will only become visible when the panorama is loading.


The lower section is for Transitions and is made available for expressions that will change their size, appearance, location, etc. Select Enabled to set the transition.

  • Duration – Set the amount of time the transition should take to make the change.
  • Easing Function – Choose how the transition behaves by selecting an easing option. Depending on the option, the change will accelerate or decelerate during the movement. Ease in, for example, will start slowly then accelerate. See the options in action:

  • Delay – apply a delay to the transition in seconds.

Use the Delete button to remove the logic block.

Use the Copy and Paste buttons to copy and paste logic blocks to other elements.

Click Cancel to close the logic block without saving changes.

Click OK to save and apply the logic block.

To add a new expression, click the Add Expression button in the upper right corner. To delete an expression, click the red “x”.

Expressions are read from the top down. This means that the first expression found to be true will be used. If you need to change the order of the expression use the green arrows found next to each expression.

✭ For logic blocks that have two values (size, position, and scale), one value can can be left empty to use the parameter’s default value.

See also