seanom Posted November 21, 2022 Share Posted November 21, 2022 (edited) Hello 👋 I've got to the point where I'm struggling to work out the answer on my own so am reaching out to the experts here. The problem Using a pinned section with Scrolltrigger in a React/Next application, I would like to apply some interactions but only on the desktop. What I'm finding is that on occasion when switching from mobile to desktop views sometimes the styles applied remain on the elements, causing some missing elements. I've used the one of the ScrollTrigger examples as a base for this. Steps to replicate the issue I'm seeing Viewing the site in mobile mode quickly increase the width to desktop size ~ > 768 and then back down to mobile. The text opacity is set but is then not removed unless I refresh the page. If I do it slowly Alternatively if I start on mobile and then increase to desktop and scroll down the text overlaps each version. https://4urh6t.csb.app/ What I'm looking to do Remove the inline styles applied when on mobile, or when viewed at a minimum height Retrigger the animation when going back to the desktop Currently the existing ones sometimes overlap, I'm assuming it's related to the height Correctly set the height of the scroll trigger Setting an aspect ratio - didn't appear to work I'm currently using a ref and then getting the offsetHeight This causes problems when used in a UseEffect, which makes sense because of the scrollTrigger pin, but I don't fully understand Using a minimum screen height can work, if I can remove the extra styles What I've tried to implement: Using gsap.matchMedia function to apply the effects only to desktop, through both conditions and media queries Applying clearProps: "all" within the gsap.matchMedia.add function. This appears to be deprecated now Using a resize listener event to kill the Scroll trigger with ScrollTrigger.KillAll(); Using SaveStyles in the older ScrollTrigger.MatchMedia Aware this one is deprecated now Calling ScrollTrigger.refresh in an Event listener on resize. I've been reading quite a lot of the forum this week but lots of the advice appears to be for older versions. Can someone help point me in the correct location please Here is a reduced version of the code, please let me know if it's too complicated I've tried to take out all the extra transitions and logic but it may still be a little too heavy. (I'm sorry it's using tailwind) Thank you in advance for any guidance https://codesandbox.io/s/scroll-trigger-react-panels-forked-4urh6t?file=/src/App.js Edited November 21, 2022 by seanom remove codepen link for clarity Link to comment Share on other sites More sharing options...
Solution GreenSock Posted November 21, 2022 Solution Share Posted November 21, 2022 Just so I'm clear, does the CodePen serve any purpose? It looks radically different than the CodeSandbox you provided. Should we just be looking at the CodeSandbox? This strikes me as a bad idea: useLayoutEffect(() => { function handleResize() { ScrollTrigger.refresh(); } window.addEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize); }, []); Because ScrollTrigger already has a throttled "resize" event handler internally that waits until about 200ms elapses where there are no more resize events, and then calls ScrollTrigger.refresh(). What you're doing there is VERY expensive since when you resize there are typically a ton of "resize" events dispatched by the browser, so you're doing a boatload of extra work. I think you were overcomplicating things. Not only did you have that wasteful resize handling, but you also had a pointless small-screen matchMedia() handler that just attempted to kill all ScrollTriggers (that's already done by the desktop matchMedia when it no longer matches) and you were wrapping the entire block of code in a gsap.context() which just isn't necessary because a gsap.matchMedia() is actually a gsap.context() internally So I think you could simplify it to this (if I understand your goal correctly, but please keep in mind that I'm not a React expert...not even close): https://codesandbox.io/s/scroll-trigger-react-panels-forked-vg1wu2 Does that work the way you wanted? Link to comment Share on other sites More sharing options...
seanom Posted November 21, 2022 Author Share Posted November 21, 2022 Thank you Jack, The codepen, was my initial jumping off point, I had only meant to link to it to indicate that not to embed it. (now removed for clarity) I appreciate the guidance this is one of my first ventures into React so I'm learning lots on the go. I had thought the the gsap.matchMedia might include a context, but appear to have got myself caught in tangles trying to many different things. That is indeed what I was trying to accomplish. 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