用途:把 Lenis 设为整页物理平滑滚动底层,并与 GSAP ScrollTrigger 正确同步,避免两库混用时常见的卡顿、触发位置偏移。适用于需要 Apple/awwwards 式顺滑滚动、且已用或计划用 ScrollTrigger(视差、reveal、pin)的页面。仅需少量滚动效果时不用本技能;单独 pin/横向滚动 section 应使用 gsap-scrolltrigger-pin,但两者共存时先按本技能初始化 Lenis。
主要能力:从外部仓库复制原始示例文件或使用内置 assets/ 精简版;安装前端依赖;写入目标项目;用无头浏览器验证。
使用方式:安装 npm i lenis gsap,或静态页用 CDN;先做 prefers-reduced-motion 守卫,再 new Lenis。无 GSAP 时用自管 raf 循环(2A);有 GSAP 时只用 gsap.ticker 作唯一驱动(2B):lenis.on('scroll', ScrollTrigger.update);gsap.ticker.add((time) => lenis.raf(time * 1000));gsap.ticker.lagSmoothing(0)。不要同时使用 2A 与 2B;不要忘记 * 1000;不要用 @studio-freight/lenis 旧包名(除非项目有意锁定)。reduced-motion 为 reduce 时不初始化 Lenis,也不以 CSS scroll-behavior 替代。
验证与限制:用 playwright-verify 快速连续滚动,检查 data-ls-reveal 与所在 section 无位置跳动,并用 page.emulateMedia 测试 reduced-motion 分支。无法拉取外部库时改用 assets/ 精简版并告知用户。具体价格、平台支持等资料暂未提供。