本文详解 gsap scrolltrigger 实现滚动时元素背景色平滑过渡的核心配置，重点解决因高度不足、脚本加载顺序或 dom 就绪时机导致的“动画不生效”问题，并提供可直接运行的完整示例。
本文详解 gsap scrolltrigger 实现滚动时元素背景色平滑过渡的核心配置，重点解决因高度不足、脚本加载顺序或 dom 就绪时机导致的“动画不生效”问题，并提供可直接运行的完整示例。
在使用 GSAP + ScrollTrigger 实现滚动驱动动画（如背景色渐变）时，最常见的“不工作”现象往往并非代码逻辑错误，而是被忽略的基础前提未满足。你提供的代码结构本身是正确的，但以下三点决定了它能否真正生效：
✅ 关键前提一：触发区域必须具备足够滚动空间
ScrollTrigger 的 trigger: ".page2" 需要目标元素拥有超出视口的高度，否则无法产生滚动位移，scrub: true 将无变化可响应。原 CSS 中 height: 100vh 仅等于屏幕高度，浏览器无内容可滚动，ScrollTrigger 无法监听到滚动行为。✅ 正确做法是将高度设为 200vh 或更高（例如 300vh），确保用户必须滚动才能“经过”该区域。
✅ 关键前提二：脚本加载与执行时机
务必确保：
- GSAP 和 ScrollTrigger 库在调用前已加载完成；
- 动画初始化函数（如
squareMove()）在 DOM 完全就绪后执行（推荐包裹在document.addEventListener('DOMContentLoaded', ...)中）； -
<script></script>标签置于
