gsap-skills ScrollTrigger完整指南滚动动画、固定定位与视差一次讲透【免费下载链接】gsap-skillsOfficial AI skills for GSAP. These skills teach AI coding agents how to correctly use GSAP (GreenSock Animation Platform), including best practices, common animation patterns, and plugin usage.项目地址: https://gitcode.com/gh_mirrors/gs/gsap-skills 本文带你读懂 gsap-skills 中的 ScrollTrigger 技能它是 GSAP 官方出品的滚动驱动动画方案覆盖滚动动画trigger 触发、scrub 滚动绑定、固定定位pin 钉住区块、视差parallax与横向滚动等核心能力并提供新手友好的最佳实践与避坑清单。仓库里的 skills/gsap-scrolltrigger/SKILL.md 把这些知识整理成一份结构化指南读完本文即可掌握其全部精华。ScrollTrigger 快速上手3 步跑通第一个滚动动画ScrollTrigger 是一个插件只需三步即可上手1️⃣ 引入 GSAP 与 ScrollTrigger 两个模块 2️⃣ 调用gsap.registerPlugin(ScrollTrigger)注册一次必须 3️⃣ 在补间tween或时间线timeline的scrollTrigger配置中写上trigger / start / end最小可用写法如下gsap.registerPlugin(ScrollTrigger); // 全局只需一次 gsap.to(.box, { x: 500, duration: 1, scrollTrigger: { trigger: .box, // 触发元素 start: top center, // 元素顶部进入视口中部时开始 end: bottom center, toggleActions: play reverse play reverse } }); 参考 examples/vanilla/ 中的最小示例main.js 演示了时间线 scrub这一推荐组合index.html 是其页面结构本地起个静态服务器即可预览效果。trigger 与 start/end滚动动画的坐标定位语法start/end决定 ScrollTrigger 的激活区间格式是触发元素位置 视口位置由两个短词组成写法含义start: top center元素顶部滑到视口中间时开始end: bottom 80%元素底部到达视口 80% 高度处结束end: 300在 start 基础上再滚动 300px 结束相对值start: clamp(top bottom)限制在页面边界内3.12 新语法end: 500数字 视口从顶部累计滚动 500px 时结束start/end也可以写成函数动态返回值。详见 SKILL.md 的 Basic Trigger 一节。scrub vs toggleActions两种驱动方式怎么选这是新手最容易混淆的一对选项二选一不要混用方式行为典型用途scrub: true动画进度与滚动实时绑定回滚则倒放进度条、视差、滚动叙事scrub: 1同上但播放头用 1 秒追赶当前滚动位置手感更顺滑追求跟手又想要惯性的场景toggleActions: play reverse play reverse滚过边界时执行离散动作play / pause / reverse / reset / restart / complete / none入场/出场动画toggleActions的四个词依次对应onEnter、onLeave、onEnterBack、onLeaveBack向下进入、向上离开、回滚进入、再回滚离开。推荐写法是把 ScrollTrigger 挂在时间线上而不是子补间上const tl gsap.timeline({ scrollTrigger: { trigger: .container, start: top top, end: 2000, scrub: 1, pin: true } }); tl.to(.a, { x: 100 }).to(.b, { y: 50 });完整时间线 ScrollTrigger 组合见 SKILL.md 示例。pin 固定定位把区块钉在屏幕上讲故事pin: true会在滚动区间内把触发元素钉在视口中配合end: 1000即可钉住 1000px 的滚动距离——这是做滚动叙事章节的基础能力。scrollTrigger: { trigger: .section, start: top top, end: 1000, // 固定 1000px 滚动距离 pin: true, scrub: 1 }三个关键细节✅pinSpacing默认为true会自动补一个占位元素防止布局塌陷只有你自己管理布局时才设为false✅不要动画被 pin 的元素本身去动画它的子元素✅ 想吸附到分步位置时加snap数字表示步进如0.25也可写labels吸附到时间线标签视差效果一行 yPercent 让背景慢半拍视差parallax 不同图层随滚动以不同速度移动产生纵深感。核心套路scrub 驱动 transform 位移gsap.to(.hero-bg, { yPercent: 20, ease: none, scrollTrigger: { trigger: .hero, start: top top, end: bottom top, scrub: true } }); 性能提示位移一律用x / y / yPercent等 transform 别名别动画top、height这类触发重排的属性。更多性能要点在 skills/gsap-performance/SKILL.md。横向滚动containerAnimation 的正确姿势竖着滚、内容横着走是最受欢迎的效果之一共四步全屏面板先 pin 住做一个动画内部内容x / xPercent的补间必须ease: none最常见的坑给该补间挂pin: truescrub: true后续想基于横向位移触发动画时配置里写containerAnimation: scrollTween⚠️ 注意containerAnimation模式下pin 与 snap 不可用且横向动画的是子元素而不是触发元素本身。完整示例与易错点见 SKILL.md 的 Horizontal scroll 一节。进阶技巧批量入场、refresh 与生命周期清理场景用什么一堆卡片同时入场替代 IntersectionObserverScrollTrigger.batch(.card, { onEnter: (els) ... })可用interval/batchMax精细控制见 batch 示例动态内容、字体、图片加载后位置变了ScrollTrigger.refresh()窗口 resize 会自动触发动态内容不会SPA 切换页面 / 删除动画元素ScrollTrigger.getAll().forEach(t t.kill())或按id精确getById(my-id)?.kill()触发器创建顺序不在页面自上而下给每个 ScrollTrigger 设置refreshPriority页面靠上 数字更小对接第三方平滑滚动库ScrollTrigger.scrollerProxy()接管读写并把ScrollTrigger.update挂到滚动库的监听器上React 用户请优先用useGSAP()hook 自动完成还原与清理见 skills/gsap-react/SKILL.md或手动在 useEffect 清理函数中处理。ScrollTrigger 常见错误清单官方避坑指南 这些错误在 SKILL.md 的 Do Not 章节 有官方说明❌scrub 和 toggleActions 同时使用—— 只能选一种驱动方式同时存在时 scrub 会胜出❌把 scrollTrigger 挂在时间线的子补间上—— 只能挂在 timeline 或顶层 tween 上❌忘记registerPlugin—— 全局至少注册一次❌动态内容变化后忘记refresh()—— 触发位置会算错❌横向滚动没用ease: none—— 滚动与水平位置无法 1:1 对齐❌生产环境留着markers: true—— 调试标记记得删除❌随机/异步顺序创建 ScrollTrigger 却不设refreshPriority—— 可能影响 pin 占位布局仓库文件导航与快速上手文件说明skills/gsap-scrolltrigger/SKILL.md核心技能文档trigger / scrub / pin / batch / 横向滚动 / 最佳实践examples/vanilla/main.js原生 JS 最小示例tween、timeline、ScrollTrigger scrubexamples/vue/app.vueVue 3 示例gsap.context作用域 onMounted/onUnmounted 清理examples/nuxt/app/composables/useGSAP.tsNuxt 4 示例可复用 composableGSAP 插件懒加载skills/gsap-timeline/SKILL.md时间线位置参数、标签、嵌套与 ScrollTrigger 搭配必备skills/gsap-react/SKILL.mdReactuseGSAP hook、scope 与自动清理examples/README.md全部示例的运行方式说明 想让 AI 编码助手也掌握这些模式一条命令即可把技能库接入 Cursor、Claude Code、Copilot 等 40 代理npx skills add https://gitcode.com/gh_mirrors/gs/gsap-skills【免费下载链接】gsap-skillsOfficial AI skills for GSAP. These skills teach AI coding agents how to correctly use GSAP (GreenSock Animation Platform), including best practices, common animation patterns, and plugin usage.项目地址: https://gitcode.com/gh_mirrors/gs/gsap-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
gsap-skills ScrollTrigger完整指南：滚动动画、固定定位与视差一次讲透
gsap-skills ScrollTrigger完整指南滚动动画、固定定位与视差一次讲透【免费下载链接】gsap-skillsOfficial AI skills for GSAP. These skills teach AI coding agents how to correctly use GSAP (GreenSock Animation Platform), including best practices, common animation patterns, and plugin usage.项目地址: https://gitcode.com/gh_mirrors/gs/gsap-skills 本文带你读懂 gsap-skills 中的 ScrollTrigger 技能它是 GSAP 官方出品的滚动驱动动画方案覆盖滚动动画trigger 触发、scrub 滚动绑定、固定定位pin 钉住区块、视差parallax与横向滚动等核心能力并提供新手友好的最佳实践与避坑清单。仓库里的 skills/gsap-scrolltrigger/SKILL.md 把这些知识整理成一份结构化指南读完本文即可掌握其全部精华。ScrollTrigger 快速上手3 步跑通第一个滚动动画ScrollTrigger 是一个插件只需三步即可上手1️⃣ 引入 GSAP 与 ScrollTrigger 两个模块 2️⃣ 调用gsap.registerPlugin(ScrollTrigger)注册一次必须 3️⃣ 在补间tween或时间线timeline的scrollTrigger配置中写上trigger / start / end最小可用写法如下gsap.registerPlugin(ScrollTrigger); // 全局只需一次 gsap.to(.box, { x: 500, duration: 1, scrollTrigger: { trigger: .box, // 触发元素 start: top center, // 元素顶部进入视口中部时开始 end: bottom center, toggleActions: play reverse play reverse } }); 参考 examples/vanilla/ 中的最小示例main.js 演示了时间线 scrub这一推荐组合index.html 是其页面结构本地起个静态服务器即可预览效果。trigger 与 start/end滚动动画的坐标定位语法start/end决定 ScrollTrigger 的激活区间格式是触发元素位置 视口位置由两个短词组成写法含义start: top center元素顶部滑到视口中间时开始end: bottom 80%元素底部到达视口 80% 高度处结束end: 300在 start 基础上再滚动 300px 结束相对值start: clamp(top bottom)限制在页面边界内3.12 新语法end: 500数字 视口从顶部累计滚动 500px 时结束start/end也可以写成函数动态返回值。详见 SKILL.md 的 Basic Trigger 一节。scrub vs toggleActions两种驱动方式怎么选这是新手最容易混淆的一对选项二选一不要混用方式行为典型用途scrub: true动画进度与滚动实时绑定回滚则倒放进度条、视差、滚动叙事scrub: 1同上但播放头用 1 秒追赶当前滚动位置手感更顺滑追求跟手又想要惯性的场景toggleActions: play reverse play reverse滚过边界时执行离散动作play / pause / reverse / reset / restart / complete / none入场/出场动画toggleActions的四个词依次对应onEnter、onLeave、onEnterBack、onLeaveBack向下进入、向上离开、回滚进入、再回滚离开。推荐写法是把 ScrollTrigger 挂在时间线上而不是子补间上const tl gsap.timeline({ scrollTrigger: { trigger: .container, start: top top, end: 2000, scrub: 1, pin: true } }); tl.to(.a, { x: 100 }).to(.b, { y: 50 });完整时间线 ScrollTrigger 组合见 SKILL.md 示例。pin 固定定位把区块钉在屏幕上讲故事pin: true会在滚动区间内把触发元素钉在视口中配合end: 1000即可钉住 1000px 的滚动距离——这是做滚动叙事章节的基础能力。scrollTrigger: { trigger: .section, start: top top, end: 1000, // 固定 1000px 滚动距离 pin: true, scrub: 1 }三个关键细节✅pinSpacing默认为true会自动补一个占位元素防止布局塌陷只有你自己管理布局时才设为false✅不要动画被 pin 的元素本身去动画它的子元素✅ 想吸附到分步位置时加snap数字表示步进如0.25也可写labels吸附到时间线标签视差效果一行 yPercent 让背景慢半拍视差parallax 不同图层随滚动以不同速度移动产生纵深感。核心套路scrub 驱动 transform 位移gsap.to(.hero-bg, { yPercent: 20, ease: none, scrollTrigger: { trigger: .hero, start: top top, end: bottom top, scrub: true } }); 性能提示位移一律用x / y / yPercent等 transform 别名别动画top、height这类触发重排的属性。更多性能要点在 skills/gsap-performance/SKILL.md。横向滚动containerAnimation 的正确姿势竖着滚、内容横着走是最受欢迎的效果之一共四步全屏面板先 pin 住做一个动画内部内容x / xPercent的补间必须ease: none最常见的坑给该补间挂pin: truescrub: true后续想基于横向位移触发动画时配置里写containerAnimation: scrollTween⚠️ 注意containerAnimation模式下pin 与 snap 不可用且横向动画的是子元素而不是触发元素本身。完整示例与易错点见 SKILL.md 的 Horizontal scroll 一节。进阶技巧批量入场、refresh 与生命周期清理场景用什么一堆卡片同时入场替代 IntersectionObserverScrollTrigger.batch(.card, { onEnter: (els) ... })可用interval/batchMax精细控制见 batch 示例动态内容、字体、图片加载后位置变了ScrollTrigger.refresh()窗口 resize 会自动触发动态内容不会SPA 切换页面 / 删除动画元素ScrollTrigger.getAll().forEach(t t.kill())或按id精确getById(my-id)?.kill()触发器创建顺序不在页面自上而下给每个 ScrollTrigger 设置refreshPriority页面靠上 数字更小对接第三方平滑滚动库ScrollTrigger.scrollerProxy()接管读写并把ScrollTrigger.update挂到滚动库的监听器上React 用户请优先用useGSAP()hook 自动完成还原与清理见 skills/gsap-react/SKILL.md或手动在 useEffect 清理函数中处理。ScrollTrigger 常见错误清单官方避坑指南 这些错误在 SKILL.md 的 Do Not 章节 有官方说明❌scrub 和 toggleActions 同时使用—— 只能选一种驱动方式同时存在时 scrub 会胜出❌把 scrollTrigger 挂在时间线的子补间上—— 只能挂在 timeline 或顶层 tween 上❌忘记registerPlugin—— 全局至少注册一次❌动态内容变化后忘记refresh()—— 触发位置会算错❌横向滚动没用ease: none—— 滚动与水平位置无法 1:1 对齐❌生产环境留着markers: true—— 调试标记记得删除❌随机/异步顺序创建 ScrollTrigger 却不设refreshPriority—— 可能影响 pin 占位布局仓库文件导航与快速上手文件说明skills/gsap-scrolltrigger/SKILL.md核心技能文档trigger / scrub / pin / batch / 横向滚动 / 最佳实践examples/vanilla/main.js原生 JS 最小示例tween、timeline、ScrollTrigger scrubexamples/vue/app.vueVue 3 示例gsap.context作用域 onMounted/onUnmounted 清理examples/nuxt/app/composables/useGSAP.tsNuxt 4 示例可复用 composableGSAP 插件懒加载skills/gsap-timeline/SKILL.md时间线位置参数、标签、嵌套与 ScrollTrigger 搭配必备skills/gsap-react/SKILL.mdReactuseGSAP hook、scope 与自动清理examples/README.md全部示例的运行方式说明 想让 AI 编码助手也掌握这些模式一条命令即可把技能库接入 Cursor、Claude Code、Copilot 等 40 代理npx skills add https://gitcode.com/gh_mirrors/gs/gsap-skills【免费下载链接】gsap-skillsOfficial AI skills for GSAP. These skills teach AI coding agents how to correctly use GSAP (GreenSock Animation Platform), including best practices, common animation patterns, and plugin usage.项目地址: https://gitcode.com/gh_mirrors/gs/gsap-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考