Jump to content
Search Community

resizing issue when using matchMedia() from desktop to mobile

Aereli test
Moderator Tag

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 App.js 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

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.
×
×
  • Create New...