本文详解 GSAP ScrollTrigger 常见失效原因及解决方案，通过调整触发高度、确保插件注册与加载顺序、设置合理 CSS 布局，实现页面滚动时 .page2 背景色从 #efeae3 平滑过渡至 #b1b1b1 的视差动画效果。
本文详解 gsap scrolltrigger 常见失效原因及解决方案，通过调整触发高度、确保插件注册与加载顺序、设置合理 css 布局，实现页面滚动时 `.page2` 背景色从 `#efeae3` 平滑过渡至 `#b1b1b1` 的视差动画效果。
GSAP ScrollTrigger 是创建高性能滚动驱动动画的首选工具，但初学者常因几个关键细节疏漏导致动画“看似不工作”。你提供的代码逻辑本身正确，但实际运行失败，根本原因通常不在 JavaScript 语法，而在DOM 可滚动性、CSS 布局约束与资源加载时机三方面。
✅ 正确配置的三大前提
确保页面具备足够滚动高度
ScrollTrigger 需要trigger元素在视口内发生明显位移才能触发。若.page2仅设height: 100vh，且其前后无其他内容，则滚动行为可能被浏览器忽略（无实际滚动空间）。✅ 解决方案：将高度设为200vh或添加前置/后置占位区块，确保用户可滚动至少 1–2 屏。-
严格保证插件加载与注册顺序
必须在调用gsap.timeline()前完成：- 引入
gsap.min.js - 引入
ScrollTrigger.min.js - 执行
gsap.registerPlugin(ScrollTrigger)
❌ 错误示例（插件未加载就调用）：
<script src="gsap.min.js"></script> <script>squareMove();</script> <!-- 此时 ScrollTrigger 尚未引入 -->
✅ 正确顺序（推荐放在
- 引入
