I'm using gsap Scrolltrigger in react, when I'm pinning the element "page1" it is pushed down , and breaks the animation

Question

gsap.registerPlugin(ScrollTrigger);

const Page = () => { useEffect(() => { gsap.to(".page1 h1", { 
 transform: "translateX(-100%)",
  scrollTrigger: {
    trigger: ".page1",
    start: 'top 0',
    end: 'top -200%',
    markers: true,
    pin: true,
    pinSpacing: false,
    scrub: 1,
   
  },
});
return ( 
<> 
<div className="main"> 
<div className="page1"> 
<h1>let play the game</h1>
</div> <div className="page2">
</div> <div className="page3">
</div> 
</div> 
</> ); };

    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: gilroy;
    }
    html,body{
        height: 100%;
        width: 100%;
        scroll-behavior: smooth;
    }
    .page1{
        background-color: rgba(0, 0, 0, 0.39);
        height: 100vh;
    }
    .page2{
        background-color: rgba(0, 0, 0, 0.432);
        height: 100vh;
    }
    .page3{
        background-color: black;
        height: 100vh;
    }
    .page1 h1{
        color: white;
        font-size: 20vw;
        white-space: nowrap;
    }

here I'm using gsap scrolltrigger but when i m using pin the code is getting broke as the element page1 is not gettting pin, and at the inital the page1 is not at its place as there is blank space on the top , I have even tried checking different browser but it is same in all browser, even console is not showing any issue, when I dont use pin function, the page1 is on its place but when i used pin the page1 is pushed down.