I was trying to replace this into a react component with tailwind css styling and I couldn't succeed since the scroll trigger is not working well. Can anyone please help me replicate this. Please take a look into this code
const ProductsSection = () => {
const containerRef = useRef<HTMLDivElement>(null);
useLayoutEffect(() => {
const context = gsap.context(() => {
gsap.to(containerRef.current, {
//xPercent: -100 * (sections.length - 1),
x: -(containerRef.current!.scrollWidth - containerRef.current!.clientWidth),
ease: "none", // <-- IMPORTANT!
scrollTrigger: {
trigger: containerRef.current,
start: "top top",
end: `+=${containerRef.current!.scrollWidth}`,
pin: true,
scrub: 0.5,
}
});
})
return () => context.revert();
}, [])
return (
<div id="container" className={"flex overflow-hidden"} ref={containerRef}>
<div className="module dark bg-gray-400 flex-2 h-screen flex place-items-center">
<h1>Module dark</h1>
</div>
<div className="module white bg-white flex-2 h-screen flex place-items-center">
<h1>Module White</h1>
</div>
<div className="module blue bg-blue-400 flex-1 h-screen flex place-items-center">
<h1>Module blue</h1>
</div>
<div className="module orange bg-orange-400 flex-3 h-screen flex place-items-center">
<h1>Module Orange</h1>
</div>
</div>
)
};