GSAP 滚动时淡入淡出

Question

我正在尝试使用 GSAP 滚动触发器创建淡出动画，其中页面首先在标题的 X 轴上滚动，然后向上滚动并淡出，在大多数情况下我可以正常工作，但标题仅淡入约 50 %，我尝试过调整持续时间和磨砂效果，但说实话，我有点迷失了。任何帮助/信息将不胜感激。

这里是 GSAP JavaScript 和 Vue/HTML 代码：

//___________________________________________________ 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>

我已经尝试过 GSAP，但到目前为止还没有任何进展。

Answer 1

没关系，我已经解决了。我傻了。

将不透明度降低到-2.5，现在效果很好..太棒了！