Skip to main content

​
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.
Layer Transition Lifecycle in an Output Player

​
Default opacity (fade) transition / CSS

.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;
  }
}