ScrollTrigger.matchMedia() Dynamic Property for Media Query Value

[Tony P]

Hello! 

 

I'm currently working with a project for a client where I'm leveraging ScrollTrigger.matchMedia() in my animation file and all is working exactly as I need it to.

 

In our dev shared code base, we have a list of pre-defined common breakpoints in a javascript config file that we import into other js modules for breakpoints to keep them consistent across projects instead of hard coding them whenever used in other matchMedia() blocks (non ScrollTrigger instances).

 

I was just wondering if there was a way to pass in aforementioned stored breakpoint values into the ScrollTrigger.matchMedia() vars object vs needing to hard code them each time.

 

I don't have a CodePen to provide since I'm not having any issues with any of my tween animations.  The following code example below is the only bit I need assistance with.  Essentially just looking to do something like this:

 

var mobileTabletBP = `(${document.querySelector('.element').dataset.breakpointMobile})`,
    desktopBP = `(${document.querySelector('.element').dataset.breakpointDesktop})`;

ScrollTrigger.matchMedia({
	[mobileTabletBP]: function() {
      
		// do mobile/tablet-y things here
      
	},
	[desktopBP]: function() {
      
		// do desktop-y things here
      
	}
});

I believe my ES6 object property syntax here is correct, but doesn't run as expected.  Tried some other ways of setting the media query vars as well and confirmed they're printing out as:  "(max-width: 1023px)" and "(min-width: 1024px)" but not working no matter what I try.

 

Is this even possible, and if so where am I going wrong with my syntax in how I should apply this within ScrollTrigger.matchMedia()?   Perhaps a data type casting issue?

 

FWIW, I'm not getting any javascript errors in the console.  It's just otherwise ignoring my scrollTrigger settings within my matchMedia() setup and the tweens run on page load.

 

Any assistance is greatly appreciated!

 

- Tony

 

[elegantseagulls]

1 hour ago, Tony P said:

I don't have a CodePen to provide since I'm not having any issues with any of my tween animations.

Even if you aren't having issues with your tweens, having a CodePen demo for this would be super helpful for us to debug/see how you have your .matchMedia setup, and how it's working/not working.

[GreenSock]

Looks to me like you're supposed to use all lowercase for the dataset stuff. At least in Chrome, here's the proof: 

See the Pen 630a7ae102683b55cf5ad0b4630395e8?editors=0010 by GreenSock (@GreenSock) on CodePen

 

var mobileTabletBP = `(${document.querySelector('.element').dataset.breakpointMobile})`,
	desktopBP = `(${document.querySelector('.element').dataset.breakpointDesktop})`,
	mobileLC = `(${document.querySelector('.element').dataset.breakpointmobile})`,
	desktopLC = `(${document.querySelector('.element').dataset.breakpointdesktop})`,
	vars = {
		[mobileTabletBP]: "mobile",
		[desktopBP]: "desktop",
		[mobileLC]: "mobileLC",
		[desktopLC]: "desktopLC"
	};
console.log(vars);

Look at the vars object - only the all-lowercase names worked even though the actual attributes in the HTML had camelCase. 

[OSUblake]

Yep. Everything should be lower cased unless the data name is spinal/snake case, like <div data-foo-bar="1"> then dataset would be like dataset.fooBar.

 

 

 

 

[Tony P]

Thanks for the responses, everyone! 

 

Actually, I've used dataset in the past with camel case being the conversion format from the dash separated format, based on what I've found in the specification for it:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

 

Which is not to say I'm saying anyone is wrong here ... just saying the camel case version always worked for me before. 

 

At any rate, here is a quick CodePen with a very simple mockup of what I was trying to achieve.  And, of course, it seems to work fine here.

See the Pen OJOXjBG by tonypiscotti (@tonypiscotti) on CodePen

 

I'm not certain why it's not working my particular project but based on my CodePen it seems that I can in fact leverage variables as object keys for ScrollTrigger.matchMedia().  So it must be something in the context of my client's project code that I will just need to troubleshoot further.

 

Sorry for the false alarm, and thanks again for the responses and input!

 

Best,

Tony