Jump to content
Search Community

Horizontal scroll with GSAP (React)

oldskool123 test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

Hi guys! 

 

Have been using GSAP for a while now and love it!

 

- First time with React + GSAP and I've been struggling with getting the horizontal scroll to work with dynamic components.

- I've experimented with it and found out that simple static sections/ divs or whatever works great.

- The problem is with the dynamic components and I've setup a small demo with it in CodeSandbox here 👉 https://codesandbox.io/s/horizontal-scroll-with-gsap-react-70062 .

 

- I think the problem the problem is with the ref and that GSAP can't find the ref target but I'm not quite sure... 

 

I've commented out the static sections that I mentioned are working fine, and below are the dynamic components that I'm trying to get to work. 

 

Any help would be appreciated 🙏🏽

 

Thanks! 💚

 

Link to comment
Share on other sites

Thanks again for all the examples. Also looked at YouTube for some examples and I think I understand it a little bit better now...

 

So I was trying out both ways, both the old- and newskool way  ;) But I didn't quite grasp how to make it to work when it comes to the component. Lets say with the newskool way?

 

I removed some code and tried doing it like the example but I'm not sure what to do with the <Page ref={(e) => createPanelsRefs(e, 0)}  . . . /> 

 

I did a new sandbox with the new edits 👉  https://codesandbox.io/s/react-ref-gsap-horizontal-scroll-2-y4x1u

Link to comment
Share on other sites

  • Solution

You weren't forwarding it correctly.

const Page = forwardRef(({ text }, ref) => {
  return (
    <div className="page" ref={ref}>
      <h2>{text}</h2>
    </div>
  );
});

 

And your panels.current.map isn't correct. You would need some kind of filled array to do something. I also added a hook to make creating an array of refs easier. 

 

https://codesandbox.io/s/react-ref-gsap-horizontal-scroll-2-forked-zdcjy?file=/src/components/ScrollContainer/ScrollContainer.js

 

 

Link to comment
Share on other sites

Hi,

I'm back again 😅

 

Everything works, except for when inspecting the demo in Chrome the whole thing goes craz . 

Didn't notice it until yesterday so I tested in other browsers e.g Safari inspecting with 'dev mode' and it works great.

So something's not working inspecting the demo in Chrome and haven't solved it yet.. 

 

Guessing that something with overflow's not working? But

 

Demo 👉 https://codesandbox.io/s/quiet-microservice-p3ek6

 

 

Link to comment
Share on other sites

Hi there.

What did you try to set the overflow-x: hidden to?

 

When I just set it to the body and the .container as I would have in a non-react environment, it also didn't work for me as I would have expected. Adding overflow-x: hidden to the .App changed things for me - it's not scrollable horizontally anymore in inspect mode.

 

.App {
  font-family: sans-serif;
  overflow-x: hidden;
}

 

  • Like 4
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...