该库面向界面动效实现,提供 200 多个可直接复制的动画配方,横跨 CSS、Framer Motion 和 GSAP。核心思路是把动效视作因果表达:只有解释关系的动画才有意义,纯装饰容易显得业余。
主要能力与组织:配方按需求索引,包括入场(25)、出场(18)、加载(16)、微交互(35)、页面转场(18)、布局(12)、滚动驱动(16)、手势(12),以及 Orchestration、Framer Motion variants 与 layout、GSAP/ScrollTrigger(Pin、scrub、横向滚动、SplitText)、自定义光标、磁吸按钮、文字效果与 3D 等。参考架构按文件切分,如 gsap-scrolltrigger-recipes.md(1897 行)、cursor-text-3d-effects.md(1394 行)、css-animation-recipes.md(1325 行)等。
主要内容包含:完整可运行代码(无占位)、精确时长与缓动(使用文中的 token)、每个配方的 reduced-motion 回退、性能成本说明(合成/重绘/触发布局),以及何时改用其他配方。
关键约定:时长随距离与尺寸变化,小状态变化 150-200ms,入场 250-350ms,跨视口 400-500ms;入场用 ease-out,出场用 ease-in,linear 只用于进度条;优先动画 transform 与 opacity。库内附带 :root 缓动常量、弹簧物理参数(gentle/bouncy/snappy 等)和 Framer Motion 弹簧预设,并假设样式表已含 reduced-motion 兜底规则(WCAG 2.1 SC 2.3.3)。
使用方式:阅读各 references 文件并复制配方,需先引入文中常量与 reduced-motion 兜底。限制:时长与缓动为推荐值,实际需结合项目调整;未提供安装命令、平台、价格或收费信息。