Tony P

Hey, Jack - That does clarify things, yes. I appreciate it!

Hi, Jack! I've encountered the same issue mentioned by the O.P. and stumbled across this post. The vanilla JS version works fine for me, but was just curious ... I had originally tried ScrollTrigger.clearScrollMemory() but was getting a console error that ScrollTrigger.clearScrollMemory() is not a function. I do have the plugin included/registered correctly as it is already working just fine otherwise. We are currently using version 3.9.1 (noticed that the clearScrollMemory() method was added as of 3.8) Is that method doing the exact same thing as window.history.scrollRestoration = "manual", or does run anything else as well to manage other ScrollTrigger processes? Not a major concern at all, was mainly just curious if I was using clearScrollMemory() incorrectly and if there was any difference to the native JS version. Thank you! Best, Tony

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. https://codepen.io/tonypiscotti/pen/OJOXjBG 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

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