GSAP Scroll Trigger标题滚动淡出异常：仅淡至50%求解决

标题无法完全淡出（仅到约50%）的核心原因有两点：

1. 两个独立的ScrollTrigger触发时机重叠、滚动范围设置不合理，导致淡出动画还未完成就提前结束
2. 淡出动画的scrub: 0参数错误，无法让动画平滑跟随滚动进度完成过渡

方案1：用GSAP Timeline整合动画（推荐） #

将横向滚动和淡出动画按顺序整合到一个时间线中，通过单个ScrollTrigger统一控制，避免触发冲突，逻辑更清晰：

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

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

// 创建时间线，按顺序执行横向滚动→淡出动画
const tl = gsap.timeline({
  scrollTrigger: {
    trigger: '.titleWrapper',
    start: 'top top',
    // 总滚动距离 = 横向滚动所需长度 + 淡出所需滚动高度（1.5倍视口高度确保动画完成）
    end: () => `+=${getScrollAmount() * -1 + window.innerHeight * 1.5}`,
    pin: true,
    scrub: 1,
    invalidateOnRefresh: true,
    markers: false
  }
})

// 第一步：横向滚动标题
tl.to('.titles', {
  x: getScrollAmount,
  ease: 'none',
  duration: 3
})

// 第二步：标题淡出
tl.to('.titles', {
  opacity: 0,
  ease: 'none',
  duration: 1.5
})

方案2：调整两个独立ScrollTrigger的参数 #

如果坚持使用两个独立的ScrollTrigger，需修正触发时机和滚动范围：

//___________________________________________________ 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',
  { opacity: 1 },
  { opacity: 0, ease: 'none' }
)

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

// 淡出的ScrollTrigger：在横向滚动完成后触发
ScrollTrigger.create({
  trigger: '.titleWrapper',
  // 触发时机设为横向滚动结束的位置
  start: () => `+=${horizontalTrigger.end}`,
  // 设置足够的滚动高度确保淡出完成
  end: () => `+=${window.innerHeight * 1.5}`,
  scrub: 0.3, // 改为大于0的值，让动画平滑跟随滚动
  animation: scrollOut,
  markers: true
})

内容的提问来源于stack exchange，提问作者JordanRR