GSAP Animations with Visual Radio Graphics

To add GSAP animations to your Visuals in Visual Radio Assist, you can make use of the custom JS in the Designer.

Example GSAP IN + OUT Fade Transition

Make sure to replace the #layer-id with your own layer ID’s.

The Default Transition should also be turned off on the layer you want to manually animate/transition.

javascript
if (typeof visualLink !== "undefined") {
  const pm = visualLink.playStateManager;
  const getCanvasElement = visualLink.getCanvasElement;

  const intro = gsap.timeline({ paused: true });
  const outro = gsap.timeline({ paused: true });

  intro.fromTo(
    getCanvasElement("layer-id"),
    { opacity: 0, x: "-10%" },
    { opacity: 1, x: 0 }
  );
  outro.fromTo(
    getCanvasElement("layer-id"),
    { opacity: 1, x: 0 },
    { opacity: 0, x: "-10%" }
  );
	pm.on(
    "cuein",
    () => {
      intro.progress(0);
      intro.pause();
    },
    { signal: visualLink.abortController.signal }
  );
  pm.on(
    "enter",
    () => {
      if (!intro.isActive()) intro.restart(); // always restart from beginning
    },
    { signal: visualLink.abortController.signal }
  );
  pm.on(
    "leave",
    () => {
      if (!outro.isActive()) outro.restart();
    },
    { signal: visualLink.abortController.signal }
  );
}