技能介绍

滚动动画开发的三个典型痛点

写滚动驱动的动画时，最常见的问题不是「动画库不够强」，而是时间线和滚动位置没有正确对齐。开发者经常在 ScrollTrigger 的 start、end、scrub 参数上反复试错：到底该用 top center 还是 top 80%？scrub: true 和 scrub: 0.5 的区别是什么？当页面上有多个 ScrollTrigger 实例时，它们之间的层级关系和刷新顺序也容易出错。

另一个常见场景是固定区域的动画：用户滚动到某个区块时，背景固定不动，前景元素逐渐显现或移动。如果不了解 pin 的工作原理，很容易出现闪烁、跳动或内存泄漏。此外，拖拽式叙述（用户滚动时动画随之推进，松手后停止）需要精确控制 scrub 和 revert 的行为，否则动画会在滚动停止时突然跳回初始状态。

技能如何工作

这个技能基于 GreenSock 官方提供的 GSAP Skills，它不是一套预设的代码模板，而是一套工作流程指南。技能会引导代理完成以下步骤：

规划动画结构：先确定哪些元素需要动画、动画的触发条件是什么、是否需要固定或吸附。
配置 ScrollTrigger：根据动画需求选择合适的 start、end、pin、scrub 参数组合，而不是盲目复制粘贴。
调试和优化：利用 ScrollTrigger 的 refresh、kill 和 revert 方法处理动态内容和路由变化，避免重复触发和内存堆积。

技能覆盖的 GSAP 能力包括：

核心 API 和时间线（gsap.timeline、gsap.to、gsap.from）
ScrollTrigger 的完整配置选项
React / Vue / Svelte 框架中的集成方式
原生 JavaScript 环境下的使用
性能优化（fastScrollEnd、preventOverlaps 等）

适用边界

这个技能不是 GSAP 产品文档的替代品。如果你只需要了解 gsap.to() 的基本语法，或者想查看 API 参考，直接查阅官方文档更高效。技能的价值在于当你需要一套有限制的滚动动画工作流程时——比如你要构建一个复杂的滚动驱动落地页，或者需要在现有项目中集成 ScrollTrigger 而不破坏已有动画——它会告诉你正确的步骤和常见的坑。

另外，技能不涉及 ScrollTrigger 之外的插件（如 GSAP SplitText、GSAP MotionPathPlugin），也不处理 3D 变换或 WebGL 渲染的性能问题。如果你的项目需要这些功能，需要额外的技能或手动配置。