ScrollTrigger pining jump on text animation

Question

I have a configuration problem that I can't resolve with scrollTrigger on my nextJS app. When the animation is triggered a translateY corresponding to the value of the end property is added to the triggered element. Also, if the element in question is pinned, the rest of the page continue scrolling and is covering the pinned element.

My component :

import gsap from "gsap"
import { ScrollTrigger } from "gsap/dist/ScrollTrigger"
import { useEffect, useRef } from "react"
import UseSplitText from "../UseSplitText/UseSplitText"

gsap.registerPlugin(ScrollTrigger)

interface PresContentProps {
  presRef: (node?: Element | null | undefined) => void
}

export const PresContent: React.FC<PresContentProps> = ({ presRef }) => {
  const text = `
  Some text here
    `

  const { textRef } = UseSplitText(text)

  let textContainer = useRef(null)

  useEffect(() => {
    gsap.from(textRef.current?.childNodes ?? [], {
      opacity: 0.25,
      stagger: 0.1,
      duration: 1,
      scrollTrigger: {
        pin: true,
        scrub: true,
        trigger: textContainer.current,
        start: "top top",
        markers: true,
      },
    })
  }, [textRef])

  return (
    <section ref={presRef} className="relative top-[120px] flex h-screen flex-col items-center justify-center">
      <div ref={textContainer}>
        <div className="w-3/4 text-3xl" ref={text}></div>
      </div>
    </section>
  )
}