GSAP fade on scroll

Question

I am trying to create a fade out animation using GSAP Scroll Trigger, where the page first scrolls across the X axis of the title before scrolling up and fading out, for the most part i have it working but the title only fades to about 50%, I have tried messing around with duration and scrub but to be honest, I am a bit lost. any help/info will be appreciated.

Here is the GSAP JavaScript and Vue/HTML code:

//___________________________________________________ Title Scrolling
    const titles = document.querySelector('.titles')

    function getScrollAmount() {
      let titlesWidth = titles.scrollWidth
      return -(titlesWidth - window.innerWidth)
    }

    const tween = gsap.to('.titles', {
      x: getScrollAmount,
      duration: 3,
      ease: 'none'
    })
    const scrollOut = gsap.fromTo(
      '.titles',
      {
        ease: 'none',
        opacity: 1
      },
      {
        ease: 'none',
        opacity: 0
      }
    )

    ScrollTrigger.create({
      trigger: '.titleWrapper',
      start: 'top top',
      end: () => `+=${getScrollAmount() * -1}`,
      pin: true,
      animation: tween,
      scrub: 1,
      invalidateOnRefresh: true,
      markers: false
    })

    ScrollTrigger.create({
      trigger: '.titleWrapper',
      start: 'bottom bottom',
      end: '140%',
      scrub: 0,
      animation: scrollOut,
      markers: true
    })






<div class="titleWrapper isolate">
      <div class="titles w-fit h-screen bg-white flex flex-nowrap flex-none items-center">
        <h1
          class="firstTitle z-40 w-screen text-black flex justify-center font-black headerSizing tracking-tighter cursor-default select-none translate-y-[15vh]"
        >
          fName
        </h1>
        <h1
          class="secondTitle text-black w-fit flex justify-center z-40 font-medium headerSizing tracking-tighter cursor-default select-none translate-y-[15vh] pl-40 pr-64"
        >
          sName
        </h1>
      </div>
    </div>

I have played around with GSAP but failed to get anything working so far.

Answer 1

Never mind, I worked it out. I am stupid.

Decreased the opacity to -2.5 and it works perfectly now.. Sweet!