Change global variable from matchmedia function

[rgfx]

Playing with match media I can't seem to change a global variable. I read that you need to make a function with variable inside the function then call the function globally. If I do that from the match media I get "function undefined". 

 

Yes, I know I can just create different tweens and just add it to match media function. But I would like to know how to pass variables around.  This is just a simplified example. 

 

Another simple one I know, but I read like 7 sites with no avail. Must be wording it wrong. 

 

Thanks

 

 

 

See the Pen QgVjar by rgfx (@rgfx) on CodePen

[OSUblake]

I remember you sending me a PM several years ago about media queries, and made this.

See the Pen WbXYvb?editors=1010 by osublake (@osublake) on CodePen

 

I could update that without jQuery if needed. What are you trying to do?

[rgfx]

@OSUblake

 

Yup, I remember your help with this as well, it was were I learned how case works. 

 

I was just using one breakpoint, so was keeping it really simple. Any unforeseen issues with my method?

 

it's for navigation system but am using "scale" to animate the background of the nav.  The element changes size depending on breakpoint. Hence scale has to change as well. 

 

Here is just a snippet of menu system. Maybe this will give you better idea.

 

My attempts to simplify via codepen have been failing lately. 

 

function menuClose() {
  menuBounceOut();
  menuStaggerClose();
  burgerAnimation.reverse();
}

var scaleNavBg = 25,
  navBg = document.querySelector(".nav-bg");

TweenMax.set(navBg, {
  xPercent: -100
});

function menuBounceIn() {
  TweenMax.to(navBg, 0.5, {
    scale: scaleNavBg,
    ease: Back.easeInOut
  });
}

function menuBounceOut() {
  TweenMax.to(navBg, 0.5, {
    delay: 0.3,
    scale: 1,
    ease: Back.easeInOut
  });
}

window.matchMedia("(min-width: 900px)").addListener(function(mm) {
  if (mm.matches || navToggle.hasClass("open")) {
    menuClose();
  }
  if (!mm.matches) {
    scaleNavBg = 25;
  }
});

 

[rgfx]

Ok, figured it out.

 

It was indeed changing the variable, but only on resize. Not on browser load.

 

The fix was adding another matchMedia to run on browser load. 

 

    if (window.matchMedia("(min-width: 900px)").matches) {
        scaleNavBg = 17;
    } else {
        scaleNavBg = 25;
    }

 

Sorry about that. Thanks.