用途:GSAP Scroll 提供基于滚动触发动画的生产配方,是官方 gsap-scrolltrigger API 参考技能的配套实践,只覆盖滚动动画配方,不替代 API 参考。整体流程为 gsap-setup → gsap-animate → gsap-scroll → gsap-optimise → gsap-test,可与 gsap-animate(上下文与清理)、gsap-optimise(批量与 scrub 调优)交叉引用。依赖 greensock/gsap-skills。
主要能力:1)基础滚动揭示:用 gsap.context() 限定范围,配合 gsap.set 与 gsap.to,以 autoAlpha 替代 opacity,toggleActions 用 'play none none reverse'。2)ScrollTrigger.batch() 实现瀑布流/网格入场,区分 onEnter、onLeave、onEnterBack、onLeaveBack,用 overwrite: 'auto' 避免快速滚动冲突,rotation 用函数按元素随机。3)视差层:通过 data-speed 控制 yPercent 与 scrub: 0.5。4)刷新模式:v-if 切换后、图片 load、字体就绪后调用 ScrollTrigger.refresh(),并用 ScrollTrigger.config({ ignoreMobileResize: true }) 处理移动端地址栏变化。
进阶模式见 references/scroll-patterns.md,包括堆叠卡片、滚动时间线、弹性文字组装、服务区块切换、速度倾斜、无限循环面板、方向感知头部、带过冲的固定面板、滚动图像遮罩、横向固定指示器与横向滚动画廊等。
使用规则:所有 ScrollTrigger 补间包在 gsap.context() 中并限定 ref;揭示用 autoAlpha;动画位置值时加 invalidateOnRefresh: true;元素可能重复触发时用 overwrite: 'auto' 或 true;在 ST 回调中管理 will-change 生命周期;影响文档高度的 DOM 变化后调用 ScrollTrigger.refresh();优先用 scrub: 0.5 而非 true。
限制:资料未提供具体安装命令、收费方式与支持平台信息。