How do I get my matchMedia to work inside of my resize event listener?

Question

I have TweenLite setting my startTrigger at x pixels depending on matchMedia sizing. I want this matchMedia to fire on browser resize so I added an event listener. It is not functioning as I have to reload the page for it to fire the matchMedia.

I've tried inserting the matchMedia code into my resize event listener which is also handling the top position of my element.

var triggerOffset2 = document.documentElement.clientHeight / 2 + 44;
var cardHeight2 = $('#card2').outerHeight(true) / 2 + 22;
var duration2 = 1000;
var requestId2 = null;  


window.addEventListener("resize", function() { 

var sceneStart2;
  if (window.matchMedia("(min-width: 1024px)").matches) {
    sceneStart2 = 5000
  } else {
    sceneStart2 = 7000
  }
  console.log(sceneStart2);

    triggerOffset2 =  document.documentElement.clientHeight / 2 +  44;

    TweenLite.set(".contain2", {
        top: triggerOffset2 - cardHeight2

    });

    TweenLite.set(".timeline-trigger", {
        top: triggerOffset2
    });
});

var sceneStart2;
  if (window.matchMedia("(min-width: 1024px)").matches) {
    sceneStart2 = 5000
  } else {
    sceneStart2 = 7000
  }
  console.log(sceneStart2);

TweenLite.set(".contain2", {
  top: triggerOffset2 - cardHeight2

});

TweenLite.set(".timeline-trigger", {
  top: triggerOffset2
});

TweenLite.set(".start-trigger", {
  top: sceneStart2
});

TweenLite.set(".end-trigger", {
  top: sceneStart2 + duration2
});


// SCROLL MAGIC!!!
var tl2 = new TimelineMax({ paused: true })
  .set(".card2", {  }, sceneStart2)
  .to(".card2", duration2, { rotationY: 180 }, sceneStart2)
  .set(".card2", {  })

// Only update on animation frames
window.addEventListener("scroll", function() {
  if (!requestId2) {
    requestId2 = requestAnimationFrame(update2);
  }
});

update2();

// Set timeline time to scrollTop
function update2() {
  tl2.time(window.pageYOffset + triggerOffset2);
  requestId2 = null;
}

The matchMedia should fire when the browser is resized to change the top position of .contain2 and the number for sceneStart2

Answer 1

Rather than binding addEventListener to window's resize event, you should use the native addListener method matchMedia offers.

From MDN:

The addListener() method of the MediaQueryList interface adds a listener to the MediaQueryListener that will run a custom callback function in response to the media query status changing.

I would declare sceneStart2 one time, at the top of your JavaScript. Its value will be updated by the built-in listener and you can remove all other matchMedia logic from your code.

Here's a stripped-down example for you to look at. With a little work, you should be able to integrate this into your code. To demo, open the "Full page" preview below.

var sceneStart2;
var output = document.querySelector('.output > span');
var minWidthMatch = window.matchMedia("(min-width: 1024px)");

function getSceneStartValue(mediaQueryList) {
  sceneStart2 = mediaQueryList.matches ? 5000 : 7000;
  displayOutput();
}

function displayOutput() {
  output.innerHTML = sceneStart2;
}

minWidthMatch.addListener(getSceneStartValue);

window.onload = getSceneStartValue(minWidthMatch);

span { font-weight: bold; }

<p>Resize the browser to dynamically change value.</p>
<div class="output">Value of <code>sceneStart2</code> = <span></span></div>

jsFiddle