Dynamic variables for ScrollTrigger.matchMedia values - way to update on screen resize?

[DannyAgent]

Hi,

 

I've been using ScrollTrigger.matchMedia and wanted to pass in a dynamic variable for the media values. Example below.

[`(min-height:${footer.offsetHeight)`]: function(){

},

This seems to work fine initially but starts to go wrong when resizing the screen.

 

My question is, is there a way to update the dynamic value of the matchMedia query when a screen is resized or are these values set on load? I have a custom window resize event listener where I initiate ScrollTrigger.refresh() manually, which works as intended for the associated triggers with invalidateOnRefresh. Would be great to find out if there is something similar for matchMedia.

[GreenSock]

I'm a bit confused - are you saying that footer.offsetHeight changes and therefore you want to stop listening for that particular media query and start listening to a new one whenever that element's height changes? If so, no, you'd need to manually handle that with your own window.matchMedia() that you stop listening to and create another one and start listening to that one. Browsers don't accommodate dynamic, constantly-changing media queries like that. 

[DannyAgent]

Yes, you interpreted my question correctly, sorry I might not have done the best job of explaining that.

 

Okay that makes sense now. Thanks for your help.

[iDad5]

Depending on your actual use case it might be a good idea to set css-custom-properties to new values in you media-queries and use those in your css structure. That way you might only need to update I resize when an animation is running.  

[Cassie]

That's not doable actually! That's a limitation of media queries, no custom properties. Environment variables are coming and will make it possible but right now, no such luck.

https://bholmes.dev/blog/alternative-to-css-variable-media-queries/