用途:当整站需要统一的 premium 动效语言,而非单点动画时使用。目标是奢华编辑风、Apple 级打磨感、创意工作室作品集或沉浸式叙事。动效取向为平滑、优雅、略带延迟且有意图感;避免弹跳、弹性、快速突变、大幅缩放、过度动画和游戏式浮夸效果。
主要能力:Lenis 平滑滚动与 GSAP ticker 同步;基于 data 属性的可复用标记 API(data-motion-text、data-reveal-group、data-image-reveal、data-parallax-image、data-magnetic、data-cursor 等);遮罩式逐词/逐行文字揭示;滚动揭示预设(fade-up、blur-in、scale、slide-left/right);clip-path 图片揭示;视差;固定横向画廊与粘性叙事场景;磁吸按钮、图片缩放等悬停效果;自定义光标与鼠标响应图层。
基础参数:ease 用 power3.out、power4.out、expo.out;scrub 0.8–1.4;揭示 0.75–1.1s;悬停 0.35–0.6s;光标延迟 0.25–0.45s;文字 stagger 词 0.035–0.07s、行 0.08–0.14s;卡片 0.06–0.1s;触发 start: "top 82%";pin 用 anticipatePin: 1。
用法:安装 npm i gsap lenis;在 DOM 就绪后仅初始化一次,Lenis 通过 gsap.ticker 驱动 raf,并监听 scroll 调用 ScrollTrigger.update;window load 时调用 ScrollTrigger.refresh()。动画主要作用于 transform、opacity 和短时 clip-path,blur 只用于文字或小元素。
限制:需在 prefers-reduced-motion: reduce 时禁用动效并直接显示内容;触摸设备应隐藏自定义光标;固定场景数量应有限并需在移动端测试;will-change 只加在实际动画元素上。