resizing issue when using matchMedia() from desktop to mobile

[Aereli]

Hello,
I have made replica of my code to show the issue that I am having.

https://codesandbox.io/s/strange-firefly-5mtce?file=/src/App.js
Do not mind the mask not being in the center for that is not the problem.. 
When resizing the window from desktop TO mobile, the `<a>TESTING</a>` does not appear. 

when i inspect it with the dev tools it shows `opacity: 0;` 
I am trying to disable all scrollTriggers and timelines when mobile.
Any help would be gladly appreciated. THANKS

See the Pen App.js by s (@s) on CodePen.

[GreenSock]

Have you watched the whole .matchMedia() video? There's mention of the .saveStyles() method in there that would likely fix what you're running into (and again, there's an explanation in the video).

 https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.saveStyles()

[Aereli]

Thanks for the fast reply,

After watching the video it explained exactly the error that is happening to me.
I have added the `.saveStyles()` method but still have the same error. 
is it possible that I have the wrong syntax? I have tried: 

here is my updated https://codesandbox.io/s/strange-firefly-5mtce?file=/src/App.js

ScrollTrigger.saveStyles("maskImageRef.current, contentRef.current")

and 

ScrollTrigger.saveStyles([maskImageRef.current, contentRef.current])

 

 

[ZachSaucier]

It should be the array version of what you have:

ScrollTrigger.saveStyles([maskImageRef.current, contentRef.current]);

 

[Aereli]

Hi as I have mentioned above, that does not work.
It returns this Error: 

TypeError: Cannot read property 'style' of null

 

[Aereli]

hmm, it seems to me that it does not like what I am initializing the useRef hook with. 

[GreenSock]

That's because you have conditional logic in your React code that doesn't create that element in that case, so it's null. You can do something like:

 

let elementsToSave = [];
maskImageRef.current && elementsToSave.push(maskImageRef.current);
contentRef.current && elementsToSave.push(contentRef.current);
ScrollTrigger.saveStyles(elementsToSave);

Or use a helper function: 

ScrollTrigger.saveStyles(omitNull([maskImageRef.current, contentRef.current]));

function omitNull(arr) {
  let i = arr.length;
  while (i--) {
    arr[i] || arr.splice(i, 1);
  }
}

 

[Aereli]

Solid this fixed it. Thanks!