Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Aereli

resizing issue when using matchMedia() from desktop to mobile

Recommended Posts

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 src by s (@s) on CodePen

Link to comment
Share on other sites

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])
 
 
Link to comment
Share on other sites

It should be the array version of what you have:

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

 

Link to comment
Share on other sites

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

TypeError: Cannot read property 'style' of null
 
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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);
  }
}

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×