Aereli Posted October 7, 2020 Share Posted October 7, 2020 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 More sharing options...
GreenSock Posted October 7, 2020 Share Posted October 7, 2020 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() Link to comment Share on other sites More sharing options...
Aereli Posted October 7, 2020 Author Share Posted October 7, 2020 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 More sharing options...
ZachSaucier Posted October 7, 2020 Share Posted October 7, 2020 It should be the array version of what you have: ScrollTrigger.saveStyles([maskImageRef.current, contentRef.current]); Link to comment Share on other sites More sharing options...
Aereli Posted October 7, 2020 Author Share Posted October 7, 2020 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 More sharing options...
Aereli Posted October 7, 2020 Author Share Posted October 7, 2020 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 More sharing options...
GreenSock Posted October 7, 2020 Share Posted October 7, 2020 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); } } 2 Link to comment Share on other sites More sharing options...
Aereli Posted October 7, 2020 Author Share Posted October 7, 2020 Solid this fixed it. Thanks! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now