Layer Transition Lifecycle

Layer Transition Lifecycle

Activation/Active state means: Output plays the layer’ parent Visual AND Layer Condition is Live

• .layer-in-transition when the layer is in a transition mode between active states
• +750 ms

• .layer-transition-in when a layer becomes active

• .layer-transition-out when a layer becomes inactive

• .layer-visible Layer transition done and Layer is visible and is active

• .layer-hidden Layer transition done and Layer is hidden and is not active

⏯️

Future Lifecycle improvements include Visual’s CUE-IN state (to know that a Visual is coming up in Output Player Rundown Queue) and a CUE-OUT state which identifies when a Visual’s playtime is almost over.

scss
.layer {
  &:not(.type-html):not(.type-visual):not(.type-snippet) {
    display: flex;
  }

  &.layer-out-transition {
    opacity: 1;
    transition: 300ms ease-in;
  }

  iframe {
    position: relative;
    z-index: -1;
  }

  &.layer-in-transition {
    opacity: 0;
    transition: 300ms ease-out;
  }

  &.layer-transition-in {
    opacity: 0;
  }

  &.layer-visible {
    opacity: 100;
  }

  &.layer-transition-out {
    opacity: 100;
  }

  &.layer-hidden {
    opacity: 0;
  }
}