To add GSAP animations to your Visuals in Visual Radio Assist, you can make use of the custom JS in the Designer.
VRA Graphic Foundations: the Visual Link Object
When writing custom JavaScript for visuals, you have access to the visualLink object that provides methods to interact with your visual canvas. It's the link between the code and the visual lifecycle and data. Every layer is accessible via the visualLink.
Always wrap your custom JavaScript code in a type check to ensure visualLink is available:
The complete visual content data object containing all visual properties and settings, like variables and tags. Try logging the object to see which properties are available.
typescript
console.log(visualLink.data)
visualLink.canvas()
Returns the main canvas DOM element for your visual in HTML.
typescript
const canvas = visualLink.canvas();
visualLink.getCanvasElement(query)
Due to the versitaile way Visuals can be rendered (in Compositions, direct URLs, single Output Players, etc.) it is not stable to get DOM elements directly by using document.queryElement for example.
Query DOM elements within your visual canvas via the getCanvasElement method available on the visualLink. Supports three query types:
ID query: getCanvasElement('elementId') - finds #visual_canvas #elementId
Class query: getCanvasElement('.className') - finds all elements with class (returns NodeList)
const element = visualLink.getCanvasElement('myElement');const elements = visualLink.getCanvasElement('.myClass');
You can override those IDs on the bottom of the properties of every Visual Layer
visualLink.playStateManager
Controls the playback lifecycle state of your visual. Use this to manage play/pause states and timing.
Available play state events (in order of execution):
.on("cuein")
.on(”enter”)
.on("leave")
visualLink.abortController
An AbortController instance for handling cleanup when the visual is removed or updated.
Transition Settings
In the settings of the Visual, below the tag editor, you'll find the Transition Settings. These settings control how your Visual transitions in and out when displayed on an output. Each mode determines how individual layer transitions combine to create the overall Visual transition behavior.
Default
The standard transition mode that uses default system behavior for transitions. Layers transition independently without affecting the overall Visual transition state.
Layer Based
The full transition duration is equal to the sum of all layer transitions. The Visual waits for all individual layers to complete their transitions before marking the entire Visual as fully transitioned in or out. This mode is ideal when you want precise control over each layer's timing and need them all to complete before the Visual is considered ready.
Visual Based
Fixed transition duration for the entire Visual, regardless of individual layer settings. When this mode is selected, you can specify:
In Duration (ms): How long the Visual takes to transition in
Out Duration (ms): How long the Visual takes to transition out
Individual layers will still animate according to their own settings, but the Visual's transition state operates on a fixed timeline.
Visual Fixed
Individual layers cannot be transitioned separately - the entire Visual has a fixed length. When this mode is active:
In Duration (ms): Fixed time for the Visual to appear
Out Duration (ms): Fixed time for the Visual to disappear
Layer-level transitions are disabled
The Visual operates as a single unified element
This mode is best for simple displays where you don't need independent layer control and want consistent, predictable timing.
GSAP Foundations
GSAP is a JavaScript library used for building animations for the web. You can use it to animate HTML elements, CSS properties, SVGs and JavaScript objects. If you want to add animations to your Visuals, you can do that with GSAP.
The GSAP Object
It is the access point to everything the engine does. The object has three main methods:
gsap.to() - Animates an element to a defined end state by changing its properties over time.
gsap.from() - Animates an element from a starting state to its current state, useful for entry effects.
gsap.fromTo() - Defines both the starting and ending values for a more controlled animation.
A GSAP timeline is a way to control multiple animations in sequence or at the same time. With a single timeline, you can manage when each animation starts.
typescript
// WITHOUT Timelines (only using delays):
gsap.to("#id",{x:100,duration:1});
gsap.to("#id",{y:50,duration:1,delay:1});//wait 1 second
gsap.to("#id",{opacity:0,duration:1,delay:2});//wait 2 seconds
typescript
//WITH Timelinesvar tl = gsap.timeline({repeat:2,repeatDelay:1});
tl.to("#id",{x:100,duration:1});
tl.to("#id",{y:50,duration:1});
tl.to("#id",{opacity:0,duration:1});// then we can control the whole thing easily...
tl.pause();
tl.resume();
tl.seek(1.5);
