gsap-scrolltrigger · 让滚动进度控制动画与固定展示

作者提供的示例，实际效果取决于你的输入和使用工具。

输入

元素：.article 正文、.reading-progress 进度条；页面使用窗口滚动。

输出

编辑示例 · 未运行

gsap.registerPlugin(ScrollTrigger);
const tween = gsap.fromTo(".reading-progress", { scaleX: 0 }, {
  scaleX: 1, transformOrigin: "left center", ease: "none",
  scrollTrigger: { trigger: ".article", start: "top top", end: "bottom bottom", scrub: true }
});
// 图片加载等布局变更完成后：ScrollTrigger.refresh();
// 页面卸载时：tween.scrollTrigger?.kill(); tween.kill();

配置 ScrollTrigger 的触发范围、滚动进度、固定区域和刷新时机，让动画与实际页面尺寸匹配。

具体任务

让内容随滚动进度变化：为具体容器设置触发区间、scrub 和必要固定效果。

处理布局变化与页面销毁：在图片或内容尺寸变化后刷新，并在组件离开时清理触发器。

必需材料

页面结构与滚动容器

动画目标、触发区间和响应式要求

可选材料

现有 GSAP 代码

减少动态效果策略

使用门槛

项目已使用可用的 GSAP 与 ScrollTrigger，能在浏览器验证滚动。

这个 Skill 额外提供的方法

把触发、刷新和销毁一并处理，减少路由切换后的重复动画。

编辑示例（未运行）

阅读时让进度条从左展开

任务：用正文区域控制一条视觉进度线。

输入：
元素：.article 正文、.reading-progress 进度条；页面使用窗口滚动。

结果片段：
```javascript
gsap.registerPlugin(ScrollTrigger);
const tween = gsap.fromTo(".reading-progress", { scaleX: 0 }, {
  scaleX: 1, transformOrigin: "left center", ease: "none",
  scrollTrigger: { trigger: ".article", start: "top top", end: "bottom bottom", scrub: true }
});
// 图片加载等布局变更完成后：ScrollTrigger.refresh();
// 页面卸载时：tween.scrollTrigger?.kill(); tween.kill();
```

示例展示确定的滚动关联与清理点；需要结合正文实际高度处理短页边界。 此为编辑示例，未安装或运行上游 Skill。

首次任务

在【页面/滚动容器】为【元素】实现【触发区间/效果】，覆盖【响应式要求】；验收：能刷新布局、销毁无残留、减少动态效果可降级。
必需材料：页面结构与滚动容器：【请填写或粘贴】；动画目标、触发区间和响应式要求：【请填写或粘贴】

验收方法

start/end 是否对应实际滚动容器

布局变化后是否刷新正确

离开页面后是否清理对应实例

依赖与准备

GSAP 与 ScrollTrigger 插件；框架组件还需生命周期清理，平滑滚动库整合可能需要 scrollerProxy。

使用边界

固定场景不能遮挡正文或妨碍正常滚动。

移动端地址栏、容器滚动与动态内容会改变触发位置，需要实机检查。

排错

markers 位置与元素不一致：核对 scroller、祖先 transform 和布局是否已稳定后再 refresh。

路由往返后动画触发多次：在生命周期清理本页实例，避免每次挂载累积注册。

固定来源

https://github.com/greensock/gsap-skills/blob/aed9cfd3277740755f6bfc1155c7aa645403b760/skills/gsap-scrolltrigger/SKILL.md

先看看示例

输入

输出

方法说明