I just started experimenting with GSAP and ScrollTriggers. My goal is to make a little animation within a section.hero that stays pinned to the screen while doing the animation. Currently my issue is that the section that I put the animations in has a 900px translate on the Y axis, at the load of the page. When I scroll down and arrive at the end of the animation the 900px translate is removed and my section goes back to the top of the screen as I want it to and the animation works as expected. Why does my section.hero has such a big offset ?

HTML

<section class="hero">
    <div class="wrapper">
        <div class="title">
            <h1 class="left">Title</h1>
            <div class="right"></div>
        </div>
        <div class="title">
            <div class="left"></div>
            <h1 class="right">Title</h1>
        </div>
        <div class="title anim">
            <h1 class="left">Title</h1>
            <div class="right"></div>
        </div>
        <div class="title">
            <div class="left"></div>
            <h1 class="right">Title</h1>
        </div>
    </div>
</section>

JS

const scrollTrigger = {
      trigger: '.hero',
      scrub: 0.75,
      markers: true,
      pin: true,
      pinSpacing: false,
    };

    gsap.to('.left', {
      scrollTrigger: scrollTrigger,
      xPercent: -100,
      ease: 'none',
    });
    gsap.to('.right', {
      scrollTrigger: scrollTrigger,
      xPercent: 100,
      ease: 'none',
    });

I tried adding the pinSpacing: false to my JS but that didn't work neither does having it to true.