Develop Visual Graphics

CSS Selectors

Default selectors:

.canvas .layer Canvas wrapper with reference to the layers

⚠️

Broken: #visual_canvas

Due to the nature of the new Visual Canvas specification for the Visual Compositions Visual Canvas’es have to be unique, so we’re adding a bit of the ID of the Visual to the #visual_canvas_{#} selector which is dynamic.

Layer

.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

Elements

Text

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

Customize Visual

Header HTML

Add libraries to your Output

Included Libraries by default

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/

→ See for layer’ element selectors

Custom Examples

Body Javascript

Raw Javascript to be added at the end of the Body

Events

To integrate your custom logic with the described Layer transition states (see) Events are dispatched on activation and hide events.

When an layer is activated the layer-activated event is triggered on the .layer HTML element. When hidden the layer-hidden event is triggered:

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
})

GSAP Animations with Visual Radio Graphics

Body-end HTML

HTML code (CSS, etc.) that is added to the end of the body (js wont be evaluated, script tags will)

Adding animations for yet to be rendered elements

Custom CSS

Appended at the end of the header after Header HTML .

Custom Fonts

If you want to make use of your own fonts, follow the next steps:

Make sure you’ve uploaded the fonts in public place, available on a public url

Adjust your Custom CSS

css
@font-face {
  font-family: 'Your Custom Font';
  src: url('https://stationx-publicwebsite.com/customfont.woff2') format('woff2')
  font-weight: normal;
  font-style: normal;
}


.canvas#visual_canvas {
	font-family: "Your Custom Font", sans-serif;
}
.layer {
	/* Layer you want to customize specifically */
	font-family: "Your Custom Font", sans-serif;
}

Verify if the font is working in the designer. If not- the Devtools of your browser will show helpful font resolver errors to debug loading your custom font.