本文详解如何使用 gsap + scrolltrigger 实现标题横向滚动后自然淡出的效果，重点解决 opacity 未完全归零、动画断层、scrub 同步异常等常见问题，并提供可复用的响应式代码模板。
本文详解如何使用 gsap + scrolltrigger 实现标题横向滚动后自然淡出的效果，重点解决 opacity 未完全归零、动画断层、scrub 同步异常等常见问题，并提供可复用的响应式代码模板。
在构建沉浸式单页滚动体验时，常需实现「先横向滑动标题 → 再纵向滚动中渐隐退出」的复合动效。上述案例中开发者已初步集成 gsap.to() 横向位移与 gsap.fromTo() 淡出逻辑，但因 opacity: 0 未被 ScrollTrigger 的 end 边界充分覆盖，导致视觉上仅衰减至约 50%，本质是动画终点未与滚动区间严格对齐。
关键修正点在于：淡出动画必须与横向滚动动画共享同一滚动容器生命周期，并通过 scrub: true 实现帧级同步，而非独立触发。原代码中第二个 ScrollTrigger 设置 scrub: 0（即非连续播放），且 end: '140%' 为固定百分比，无法适配动态计算的横向滚动距离，导致 opacity 插值中断。
✅ 正确做法如下（精简可靠版）：
const titleWrapper = document.querySelector('.titleWrapper');
const titles = document.querySelector('.titles');
// 动态计算横向滚动最大位移（兼容 resize）
const getMaxX = () => -(titles.scrollWidth - window.innerWidth);
// 创建统一 timeline，确保 x 位移与 opacity 联动
const tl = gsap.timeline({
scrollTrigger: {
trigger: titleWrapper,
start: 'top top',
end: () => `+=${getMaxX() * -1}`, // 与横向滚动距离一致
pin: true,
scrub: 1,
invalidateOnRefresh: true,
markers: false
}
});
tl
.to(titles, { x: getMaxX, duration: 1, ease: 'none' }) // 横向滚动（占满整个触发区间）
.to(titles, { opacity: 0, duration: 1, ease: 'none' }, '<p>? 注意事项：</p>
- 避免分离多个 ScrollTrigger：横向移动与淡出应共用一个 timeline 和同一个 ScrollTrigger 实例，保证时间轴对齐；
-
禁用
fromTo()独立动画：gsap.fromTo()在scrub: 0下仅执行一次，无法响应滚动进度；务必改用to()配合 timeline 时间锚点（如'）； -
opacity: 0必须落在end范围内：若end过短，opacity 插值会被截断；建议用动态值（如+=${getMaxX()*-1}）替代硬编码百分比； -
响应式健壮性：添加
invalidateOnRefresh: true并在window.addEventListener('resize', () => ScrollTrigger.refresh())中刷新触发器，防止窗口缩放后计算失准。
? 进阶提示：如需更精细控制淡出起始位置（例如滚动到 70% 时开始变透明），可在 timeline 中使用偏移时间戳：
tl.to(titles, { opacity: 0 }, '+=1.5'); // 在横向滚动完成 1.5 秒后开始淡出
至此，标题将平滑完成「全宽横移 → 纵向滚动中匀速归零透明度」的连贯效果，无卡顿、无残留、无响应式断裂。GSAP 的强大之处，正在于将复杂时间关系封装为可读、可调、可维护的声明式逻辑——而 ScrollTrigger，则是将其锚定到用户真实滚动行为的精准桥梁。
