I have a series of buttons on a frame. Each button “should” change the source of a video component, fade it up, and then when it’s completed, fade it down. The code I have below is a simplified version, where I have two buttons. Currently, the code almost does what I need it to do. It fades up the video, it changes sources, etc. However, when a button is clicked, on the next click of it or any other button, the video fades up, then disappears. I suspect that the opacity is going from 0 to 1 and then crashing back to 0. I am, regrettably, not sure how to fix the issue. The code follows:

var root = this;
 
root.onDrawEnd = function(e, data)
{
    root.fadeVideo(data.id, data.from, data.to, data.duration);
};
 
root.fadeVideo = function(id, from, to, duration)
{
    currentVideo = document.getElementById(id);
    currentVideo.animate([{ opacity: from }, { opacity: to }], { duration: duration });
    currentVideo.addEventListener("ended", function(e)
    {
        e.currentTarget.animate([{ opacity: to }, { opacity: from }], { duration: duration, fill: "forwards" });
    });

};

function changeVideoSource() 
{ 
    stage.on("drawend", root.onDrawEnd, null, true, { id: "yourVideo", from: 0, to: 1, duration: 2000 });
    document.getElementById("yourVideo").src="../videos/HABs_eng.mp4"; 
} 
    
this.yourButton.on("click", changeVideoSource);

function changeVideoSource2() 
{ 
    stage.on("drawend", root.onDrawEnd, null, true, { id: "yourVideo", from: 0, to: 1, duration: 2000 });
    document.getElementById("yourVideo").src="../videos/Lead_esp.mp4"; } 
        
this.yourButton2.on("click", changeVideoSource2);