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.
javascriptconst tl = gsap.timeline({ paused: true }); tl.set("#layer-id", { // initial state opacity: 0 }); tl.to("#layer-id", { opacity: 1 }).addPause(); // in animation tl.to("#layer-id", { opacity: 0 }); // out animation window.visual_playstate_manager.on("activate", () => { tl.restart(); // always restart from beginning }); window.visual_playstate_manager.on("deactivate", () => { tl.play() // continue playing after -first- pause }); cleanup.cleanup = () => { tl.kill(); };