jaswanth

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> ) };