Jump to content
Search Community

ScrollTrigger.matchMedia + React not picking up on conditional layout change

Ben H. test
Moderator Tag

Recommended Posts

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

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

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