Horizontal scroll using ScrollTrigger in React using GSAP?

Question

I'm trying to do horizontal scroll using GSAP in react but the problem is I am getting the output but the screen is not scrolling its 'Fixed' not scrolling anywhere. not horizontally not vertically and i want to scroll it horizontally.

App.js

function App() {
 
  const containerRef = useRef()
  const revealRefs = useRef([])
  revealRefs.current = []

  useEffect(() => {
     revealRefs.current.forEach((el, index) => {
      gsap.to(el, {
        xPercent: -100 * (el.length - 1),
        ease: "none",
        scrollTrigger: {
          id: `section-${index+1}`,
          trigger: el,
          invalidateOnRefresh: true,
          pin: true,
          scrub: 1,
          end: () => "+=" + el.offsetWidth
        }
      })
     })
  }, [])

  const addToRefs = (el) =>{
    if( el && !revealRefs.current.includes(el)){
      revealRefs.current.push(el)
    }
    console.log(revealRefs.current)
  }

  return (
    <div className="container" ref = {containerRef}>
      <div className = 'module green' ref={addToRefs}>
        <h2>module</h2>
        <p>green</p>
      </div>
      <div className = 'module yellow' ref={addToRefs}>
        <h2>module</h2>
        <p>yellow</p>
      </div>
      <div className = 'module orange' ref={addToRefs}>
        <h2>module</h2>
        <p>orange</p>
      </div>
      <div className = 'module purple' ref={addToRefs}>
        <h2>module</h2>
        <p>purple</p>
      </div>
      <div className = 'module blue' ref={addToRefs}>
        <h2>module</h2>
        <p>blue</p>
      </div>
      <div className = 'module red' ref={addToRefs}>
        <h2>module</h2>
        <p>red</p>
      </div>
    </div>
  );
}

this is the output and the screen is not scrolling anywhere.

Answer 1

I am also facing the same issue. Anyway I got a temporary solution, it might not be the best, but it works for now. In React 18, they are introducing a new feature called ReactDOM.createRoot.

In your index.js, pass your rootElement into ReactDOM.

import ReactDOM from 'react-dom';

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
     <App />
  </React.StrictMode>,
  rootElement
);

This will use back React 17, there also will be a warning at the console. The problem is that, if you look at the class name "pin-spacer", the height of it should be your containerRef width + 1 of addToRefs height. So it will have space to scroll down.

If you don't want to downgrade to React 17, you also can work around it by manually adding height to your .container wrapper.

Anyhow, if anyone or you have already figured out a better solution or fix, please feel good to share it here. So we can fix it properly, thanks in advance.