Ben H. Posted May 20, 2022 Share Posted May 20, 2022 Hello, I am having issues integrating GSAP ScrollTrigger with React.js. I want to have two different layouts for "desktop" and "mobile", defined by a breakpoint width of 1300px wide. I am conditionally rendering each layout based on an isMobile state, which I'm getting from the react-responsive library. Because of this, I don't think that the ScrollTrigger.matchMedia function is picking up on the new layout when you pass the 1300px threshold when resizing the window. It seems to work fine if you refresh the window completely, but if you resize your window to the breakpoint, the ScrollTrigger does not pick up the changes. Is there something I'm missing that would allow me to pick up on this conditional rendering? Or should I be rendering the layouts a different way? REPL.it can be found here Thank you! Link to comment Share on other sites More sharing options...
GreenSock Posted May 20, 2022 Share Posted May 20, 2022 Welcome to the forums, @Ben H.. It's tough to troubleshoot on REPL.it because it seems it's not possible to make changes and see the results like you could on CodeSandbox, for example. Am I missing something? I've never heard of REPL.it before. It looked like in order to fork it, the site forces you to register and create a new account, providing personal information (not something I'd like to do). Anyway, it looks like your target elements don't exist when that code is executed (notice the warnings in the console). I'd recommend trying to console.log() those elements to see what's going on there. If you still need some help, please provide a minimal demo in something editable like CodeSandbox. 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