Gsap trigger set on the full page

Question

I was looking for a library compatible with react for animations. I have finally found gsap as the best library for scrolling animations.

However I have some troubles with it. When I set my trigger, 9 time on 10 it apply on the full page. The full page become the trigger like if i would have set the body as the trigger... Besides, when i set a pin (i don't really understand the use), there's a space created.

My code:

//new time line with trigegr
  let tl = gsap.timeline({scrollTrigger:
    {
    trigger:"#secondPage",
    pin: "#secondPage",
    start:"top center",
    markers:true,
    scrub:2.2
    }
  }) 

  tl.to(".scdn-title", {y:-1000}, 0)

React

      <section className='scndPage' id="secondPage">
        <div className='fourviere'></div>


        <div className='level'>
          <div></div>
          <div className='active'></div>
          <div></div>
        </div>

        <div className='main-container'>
          {/**********************/}
          <div className="title-container">
            <h1 className="title scdn-title" id="scdn-title" >Basilika Notre Dame de Fourvière</h1>
          </div>
          <div className="subsubtitle-container">
            <h1 className="subsubtitle">Die Basilika bietet nicht nur einen atemberaubenden Blick auf Lyon, sondern ist auch zum wahren Symbol von Lyon geworden</h1>
          </div>
          {/**********************/}
        </div>



      </section>

If anyone has a way to solve that. Thanks