Using JS media queries to change ScrollMagic trigg

问题:

How can I successfully reload my scroll magic code and change the triggerHook position? When I try to do it with the code below it sets the trigerHook twice so there are two of them on the screen. My ScrollMagic code goes like this:

//Scrollmagic & gsap to move buildings//
var controller = new ScrollMagic.Controller();

// build scene first building

new ScrollMagic.Scene({
triggerHook: myTriggerHook,
triggerElement: "#sec1",
duration: $("#sec1").height() + 0
})
.on("enter leave", function() {
  $("#sec1").toggleClass("show-slides");
  $("#nav").toggleClass("startx");
})
.addIndicators()
.addTo(controller);
};

loadScrollMagic();
var myTriggerHook;

And my media queries are here below.. you can see I am trying to change myTriggerHook variable and reload the ScrollMagic code at different screen widths. What am I missing?

//Media Queries
var mqls = [
  window.matchMedia("(min-width: 1024px)"),
  window.matchMedia("(min-width: 768px) and (max-width: 1023px)"),
  window.matchMedia("(max-width: 767px)")
];

function mediaqueryresponse(mql) {
  if (mqls[0].matches) {
    myTriggerHook = 0.5;
    loadScrollMagic();
  }
  if (mqls[1].matches) {
    myTriggerHook = 0.3;
    loadScrollMagic();
  }
  if (mqls[2].matches) {
    document.body.style.backgroundColor = "green";
  }
}

for (var i = 0; i < mqls.length; i++) {
  mediaqueryresponse(mqls[i]); // call listener function explicitly at run time
  mqls[i].addListener(mediaqueryresponse); // attach listener function to listen in on state changes
}