SuperAPI AI 工具集

motion-animation

前端与建站

查看项目

更新于 10-23 02:47

技能介绍

Motion & Animation 是一套面向网页动效的固定技术栈技能,技术组合固定为 Lenis(平滑滚动)+ GSAP + ScrollTrigger,被定位为单一的“运动引擎”。资料明确指出,不要混用 Framer Motion、揭示类库(reveal libs),也不要把 CSS 平滑滚动当作主引擎。

主要能力:实现平滑滚动、入场揭示、视差与微交互。资料包含的具体规则包括:重要入场/出场的时长最小 0.6 秒,推荐 0.8–1.4 秒;缓动使用 power3 或 expo 家族,入场默认 power3.out;编辑式序列使用 stagger: 0.2;优先动画化 transform、opacity、clip-path;必须尊重 prefers-reduced-motion(关闭或简化动效);保留项目现有技术栈,只安装缺失的部分;在卸载或正确的生命周期中清理时间线、触发器与 Lenis。

使用方式(心智模型):Lenis 负责滚动的“体感”,GSAP 负责时间线与属性,ScrollTrigger 把时间线接到滚动上(必要时用 pin、scrub)。需要将 Lenis 与 GSAP 的 ticker 同步,并调用 ScrollTrigger.update。

工作流:1)先定义动效的角色(吸引注意、揭示、营造氛围),不要为了动画而动画;2)选择节拍:入场、保持、出场;3)用 Lenis + GSAP + ScrollTrigger 实现;4)测试 reduced motion 与移动端(必要时减少位移或 pin)。

检查清单:只使用 Lenis + GSAP + ScrollTrigger 作为引擎;时长与缓动符合规范;处理了 prefers-reduced-motion;完成了清理。

适用场景:需要滚动叙事、揭示、视差与微交互的网页前端项目。限制:引擎不得混用;需遵守时长、缓动与清理规范;移动端与减少动效模式下需简化。安装命令、版本号、包管理器与具体 API 示例暂未提供。