Output Visuals

• #visual_canvas .canvas Canvas wrapper containing all layers

• .layer Wraps layer, with Layer’ CSS Selector applied
• # ID Selector for Layer (customizable)
• .type-{type} → contains layer type (.layer.type-text = a text layer)
• schedulingmedia
• text
• media
• html
• snippet

• Text
• .h1 - .h6 + .p are classes that are added to the layer element

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.

• Tailwind CSS (CSS styling)

• anime.js
anime.js
Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API.It works with CSS properties, SVG, DOM attributes and JavaScript Objects. Getting started
https://animejs.com/

javascript

document
	.querySelector(".layer#selection-id")
	.addEventlistener("layer-activated", function(){
	// do special stuff
})
document
	.querySelector(".layer#selection-id")
	.addEventlistener("layer-hidden", function(){
	// do special stuff
})