Skip to main content

Layer Transition Lifecycle for CSS

The CSS classes that mark each stage of a layer’s transition.

GSAP Animations with Visual Radio Graphics

Animate your Visuals with GSAP from the Designer’s custom JS.

​
CSS Selectors

Default selectors:
  • .canvas .layer Canvas wrapper with reference to the layers
    Broken: #visual_canvasDue 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)
  • GSAP
→ See CSS Selectors for layer’ element selectors

​
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 Designer) 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: 
visualLink.getCanvasElement("layer-id")
	.addEventlistener("layer-activated", function(){
	// do special stuff
})
visualLink.getCanvasElement("layer-id")
	.addEventlistener("layer-hidden", function(){
	// do special stuff
})

​
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 .
Only em is validAvoid using px or rem, as they do not consistently produce predictable results across contexts. Prefer em, which provides more reliable and context-aware scaling.