amanvarshney

i just followed this tutorial

Pin works fine in desktop but in mobile it over scrolls i am using nextjs 13 tailwindcss I read all the other posts on this topic cant figure out what is happening "use client"; import HomePage from "@/app/home/HomePage"; import {Montserrat} from "next/font/google"; import {ThemeProvider} from "next-themes"; import dynamic from "next/dynamic"; const montserrat = Montserrat({ subsets: ['latin'], display: 'swap', }) const About = dynamic(() => import('@/app/about/AboutPage')) const Contact = dynamic(() => import('@/app/contact/ContactPage')) const Faqs = dynamic(() => import('@/app/faqs/FaqsPage')) const Work = dynamic(() => import('@/app/work/WorkPage')) const Footer = dynamic(() => import('@/app/footer/Footer')) const Team = dynamic(() => import('@/app/team/TeamPage')) const GoToTop = dynamic(() => import('@/app/GoToTop')) export default function Home() { return ( <ThemeProvider attribute="class" defaultTheme={"dark"} disableTransitionOnChange enableSystem={false}> <main id="container" className={`text-white ${montserrat.className}`}> <GoToTop /> <HomePage/> <About/> <Work /> <Team /> <Faqs /> <Contact /> <Footer /> </main> </ThemeProvider> ) } globals.css @tailwind base; @tailwind components; @tailwind utilities; html, body, * { @apply p-0 m-0 box-border } body { @apply dark:bg-[#121212] bg-[#F2F2F2] overflow-hidden overflow-y-scroll; cursor: url('cursor.svg') 15 15, default; } ::-webkit-scrollbar { width: 10px; height: 20px; } ::-webkit-scrollbar-track { /*@apply dark:bg-[#121212] bg-white*/ @apply bg-transparent } ::-webkit-scrollbar-thumb { @apply bg-[#D8E9A8] dark:bg-[#D8E9A8] } ::-webkit-scrollbar-thumb:hover { background: #4E9F3D; } work.tsx "use client"; import {gsap} from "gsap"; import {ScrollTrigger} from "gsap/dist/ScrollTrigger"; import {useEffect, useRef} from "react"; export default function Work() { const sectionRef = useRef(null); const triggerRef = useRef(null); gsap.registerPlugin(ScrollTrigger); useEffect(() => { const pin = gsap.fromTo(sectionRef.current, { translateX: 0 }, { translateX: "-400vw", ease: "none", duration: 1, scrollTrigger: { trigger: triggerRef.current, start: "top top", end: "2000 top", scrub: 0.5, pin: true, snap: 1 / (5 - 1), } }) return () => { pin.kill() } }, []) return ( <section id="workpage" className={"overflow-hidden"}> <div ref={triggerRef}> <div ref={sectionRef} className={"h-screen flex flex-row relative w-[500vw]"}> <div className={"h-screen w-full bg-green-800"}></div> <div className={"h-screen w-full bg-blue-200"}></div> <div className={"h-screen w-full bg-red-600"}></div> <div className={"h-screen w-full bg-pink-400"}></div> <div className={"h-screen w-full bg-yellow-200"}></div> </div> </div> </section> ) }