本文详解 gsap scrolltrigger 背景颜色滚动动画的正确配置方法，涵盖必备依赖、触发条件、高度设置等关键要点，并提供可直接运行的完整示例代码。
本文详解 gsap scrolltrigger 背景颜色滚动动画的正确配置方法，涵盖必备依赖、触发条件、高度设置等关键要点，并提供可直接运行的完整示例代码。
GSAP 的 ScrollTrigger 是实现高性能滚动驱动动画的强大插件，但初学者常因基础配置缺失导致动画“不生效”。你遇到的 .page2 背景色无法随滚动渐变的问题，通常并非代码逻辑错误，而是页面可滚动空间不足或依赖未正确加载所致。
✅ 核心前提：确保页面具备足够滚动高度
ScrollTrigger 需要目标元素（如 .page2）在视口中有明确的进入/离开过程。若 .page2 仅设 height: 100vh，且其前后无其他内容，则整个页面无滚动行为——ScrollTrigger 将无法计算滚动位置，自然不会触发动画。
✅ 正确做法：为 .page2 设置 height: 200vh（或更高），或在其前后添加占位内容（如 <div style="height: 100vh;"></div>），确保页面总高度 > 视口高度。
✅ 必备依赖：按顺序引入脚本
必须显式引入并注册插件，且顺序不可颠倒：
<!-- 在 </body> 前引入 --> <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script> <script> gsap.registerPlugin(ScrollTrigger); // 必须在使用前注册！ </script>
⚠️ 注意：CDN 链接中邮箱地址为防爬虫混淆写法（如
[email protected]），实际使用时请替换为标准 URL，例如https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js。
✅ 完整可运行示例（含修复后代码）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GSAP ScrollTrigger 背景渐变示例</title>
<style>
* { margin: 0; padding: 0; }
body { overflow-x: hidden; } /* 防止横向滚动干扰 */
.page2 {
background-color: #efeae3;
height: 200vh; /* ✅ 关键：提供足够滚动空间 */
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: #333;
}
</style>
</head>
<body>
<!-- 占位内容，确保 .page2 可被滚动触发 -->
<div style="height: 100vh; background: #fff;"></div>
<div class="page2 page">滚动查看背景色变化 →</div>
<div style="height: 100vh; background: #f9f9f9;"></div>
<!-- 按顺序加载 GSAP 及插件 -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
function squareMove() {
gsap.timeline({
scrollTrigger: {
trigger: ".page2",
scrub: true, // ✅ 启用平滑滚动绑定（非一次性触发）
start: "top top", // 元素顶部对齐视口顶部时开始
end: "bottom bottom" // 元素底部对齐视口底部时结束
}
}).to(".page2", {
backgroundColor: "#b1b1b1",
duration: 1
});
}
squareMove(); // 立即执行初始化
</script>
</body>
</html>? 调试小技巧
- 打开浏览器开发者工具 → Console，确认无
ScrollTrigger is not defined报错； - 在
scrollTrigger中临时添加markers: true，可视化触发区域（上线前务必移除）； - 使用
ScrollTrigger.refresh()在动态加载内容后手动刷新触发器； - 避免在
display: none或opacity: 0的元素上设置ScrollTrigger。
掌握这些要点后，你的滚动背景动画将稳定生效——GSAP 的强大，始于精准的基础配置。
