Storyline 360 - JavaScript / GSAP - Problem

Hi all,

A quick disclaimer, I am not an expert on JavaScript, I am learning in a mixed and matched way, I mainly follow tutorials and modify them depending on the need.

On the topic of tutorials I follow Learnomancers animated progress bar tutorial found here: Create a Gamified Progress Bar in Articulate Storyline 360 using Javascript & GSAP

The progress bar will update on button click and receive points into a variable which in turn will animated the bar to fill to a scale. 

 

The First Issue:

When the published module window is moved at all the bar will show filled until the animation updates (more points are added, then animated):

Before move:

 

After move

The bar will correct itself once the animation JavaScript has ran again (received more points)

 

The Second (Larger) Issue

For some reason when animating a bar with GASP if I change the resolution of the published module the bar is no longer positioned where it should be. The bar becomes offset and I'm not sure why. If you continue to reduce the size of the window eventually the bar must move off screen as its not longer visible.

Does anyone happen to know why this would occur, this is an issue as we use multiple monitors and some learners transfer the window from a 1080 monitor to a ultrawide monitor, which completely breaks the progress bar.

Expected:

When the published module window is resized:

 

The issue doesn't not persist within the Storyline Editor if you change the output devices but it does if you resize storyline when previewing the slide generally: 

I've attached a sample .story file with the issue

Any help or ideas would be really appreciated.

Thank you

Here's the butchered JavaScript code if needed:

var progressBar = document.querySelector("[data-acc-text='progressBar']");
var levelText = document.querySelector("[data-acc-text='levelText']");

var player = GetPlayer();
var XP_requiredPoints = player.GetVar("XP_requiredPoints");
var XP_displayedPoints = player.GetVar("XP_displayedPoints");
var XP_gainedPoints = player.GetVar("XP_gainedPoints");
var XP_totalUserPoints = player.GetVar("XP_totalUserPoints")

var objectScale;
var currentLevel = player.GetVar("currentLevel");;
var levelsGained;


XP_displayedPoints = XP_displayedPoints + XP_gainedPoints;
XP_totalUserPoints = XP_totalUserPoints + XP_gainedPoints;
player.SetVar("XP_totalUserPoints",XP_totalUserPoints);

//add level
levelsGained = Math.floor(XP_displayedPoints / XP_requiredPoints);
currentLevel = currentLevel + levelsGained;



if(levelsGained >= 1){
    gsap.to(levelText, {scale:1.2, repeat:1, yoyo:true, ease: "power2.inOut", delay:1});
};


if (XP_displayedPoints >= XP_requiredPoints)
    {
    
    XP_displayedPoints = XP_displayedPoints - XP_requiredPoints;
    player.SetVar("XP_displayedPoints",XP_displayedPoints);

    }
else{

    player.SetVar("XP_displayedPoints",XP_displayedPoints);
    
    };


objectScale = XP_displayedPoints / XP_requiredPoints;


// Animate the progress bar from the current scale to the new scale
if(levelsGained >= 1){
    gsap.to(progressBar, {
      scaleY: 1,
      duration: 1, 
      ease: "power2.inOut",
      transformOrigin: "bottom",
      //Below: Continues the animation to matach the remaining points
      onComplete:function(){
      player.SetVar("currentLevel", currentLevel);
          gsap.to(progressBar, {
              scaleY: objectScale,
              duration: 1, 
              ease: "power2.inOut",
              transformOrigin: "bottom",
              delay:0
        });
      }
});

} else {
gsap.to(progressBar, {
  scaleY: objectScale,
  duration: 1, 
  ease: "power2.inOut",
  transformOrigin: "bottom",
});

};