SuperAPI AI 工具集

gsap-scroll

编程与开发

查看项目

更新于 10-15 22:38

技能介绍

GSAP Scroll 是 gsap-cookbook 中专注于滚动动画配方的技能,属于 gsap-setup → gsap-animate → gsap-scroll → gsap-optimise → gsap-test 流程的一环,覆盖 ScrollTrigger 的实战写法而非 API 参考;查阅 API 需调用官方 gsap-scrolltrigger 技能,环境需 greensock/gsap-skills。

主要能力包括:基础滚动显现,用 gsap.context() 限定作用域,配合 gsap.set 与 scrollTrigger 的 start、toggleActions、invalidateOnRefresh;ScrollTrigger.batch() 实现瀑布流/网格批量进出动画,支持 onEnter、onLeave、onEnterBack、onLeaveBack 回调及 overwrite:'auto' 防止快速滚动冲突;视差层,通过 data-speed 与 yPercent、scrub 实现不同速度位移;以及刷新处理,如 v-if 切换后 await nextTick() 再调用 ScrollTrigger.refresh(),或监听图片加载、document.fonts.ready 后刷新,并用 ScrollTrigger.config({ ignoreMobileResize: true }) 处理移动端地址栏变化。

高级模式在 references/scroll-patterns.md 中,包括堆叠卡片、scrubbed 时间线、弹性文字组装、服务区块切换、速度倾斜、无限循环面板、方向感知头部、带过滚动的固定面板、滚动图像遮罩、侧向指示器、水平滚动画廊。

使用规则:所有 ScrollTrigger 补间包在绑定 ref 的 gsap.context() 中;显现用 autoAlpha 而非 opacity;动画位置值时加 invalidateOnRefresh: true;元素可能重复触发时用 overwrite;在 ScrollTrigger 回调中管理 will-change;影响文档高度的 DOM 变化后调用 ScrollTrigger.refresh();优先用 scrub: 0.5 而非 scrub: true。具体安装步骤与其它限制资料未提供。