动效 · 素材与工具

动效库选型Motion Library

先列需求再选工具：CSS 能做的不上库；组件进出、布局、手势交给 Motion；多段时间线和滚动叙事交给 GSAP；一个项目尽量只引一个库，并且都要尊重减少动效。

先把需求分拣一遍

同一个项目、7 个动效需求。分给不同的工具，看卡片上的判定、顶部的体积和 package.json 怎么变。

动效需求分拣台

一个 React 项目要做下面 7 个动效。把每张需求卡交给 CSS、Motion 或 GSAP，看判定、看新增体积、看 package.json 多了什么。

新增打包体积0KB

✓ 纯 CSS

体积为 gzip 后的量级，以官方文档和打包分析为准。

package.json · dependencies

  "next": "…",  "react": "…",  // 没有新增动效依赖

减少动效（看每个库怎么接）

待分拣7 张

CSS+0KB

减动效：打开上方开关查看接法

还没有需求

Motion约 +40KB（完整 motion 组件）

减动效：打开上方开关查看接法

还没有需求

GSAP约 +20–30KB（核心）

减动效：打开上方开关查看接法

还没有需求

把每张需求卡分给 CSS / Motion / GSAP，卡片会立刻贴上判定和原因；再点一次同一个按钮可退回。已分拣 0/7，合适 0 张。还没引任何库：纯 CSS，新增 0KB。

分拣台上的判定，归纳起来就是五条：

CSS 能做的不要上库：悬停、按下、淡入、展开这类“两个状态之间平滑过去”，CSS 过渡 0KB 就能做；交给库只会多出体积。
组件卸载退场、布局让位、拖拽手势是 Motion 的主场：Motion（原 Framer Motion，现在的包名是 motion）专门处理 React 组件进出、位置重排和手势，CSS 在这些地方“写不动”。
多段时间线、滚动叙事是 GSAP 的主场：一长串按顺序编排、跟着滚动播放和钉住的动画，用 GSAP 的时间线和 ScrollTrigger 最顺手。
每个库都有体积成本，两个一起上要有理由：计量条上你看到了，两个库叠起来首屏就多出几十 KB；同一件事两个库都能做时，留一个。
无论用哪个都要接减少动效：CSS 用 @media (prefers-reduced-motion)，Motion 用 useReducedMotion / MotionConfig，GSAP 用 gsap.matchMedia()；在 AI 的报告里认得出这些名字就够了。

出现这些信号时

AI 准备 npm install 一个动画库；页面动效需求一下子列了好几条；首页要做滚动叙事；或者你发现项目里已经有一个动效库、AI 又想装另一个。

不用纠结的时候

只有悬停、按下、淡入这类简单反馈——直接 CSS，不用选库。项目已经在用某个库，新需求它也能做——继续用它。

跟 AI 说
「先列出页面所有动效需求再选工具：悬停、按下、颜色过渡用纯 CSS；React 组件进出场、布局变化、拖拽用 Motion；多段时间线、滚动叙事才用 GSAP。每个需求说明为什么不用 CSS，列出新增的打包体积，同一项目尽量只用一个库，所有方案都要尊重减少动效。」
看 AI 的报告和 diff 时查
打开 package.json 的改动，看 dependencies 新增了什么：只多一个 motion 或 gsap 是正常的；motion 和 framer-motion 同时出现，是同一个库的新旧两个包名，重复了；gsap 和 motion 同时出现，就追问各管什么、能不能删一个。
验收时看
悬停类动效是不是还在用 CSS；报告里有没有写体积；在系统里打开减少动效，弹窗、列表、滚动叙事是不是都直接到位、内容不缺。

同样是悬停按钮、弹窗和列表动画，只差在选库。

正例悬停走 CSS，弹窗和列表走 Motion，只引一个库

AI 的报告列出 5 个动效：2 个纯 CSS（说明 0KB），3 个用 Motion（各写一句“为什么 CSS 写不动”）；package.json 只多了motion；每个都接了减少动效。

反例悬停也用 GSAP，弹窗又装了 framer-motion

package.json 同时多了 gsap 和 framer-motion，首屏多出几十 KB；悬停这种一行 CSS 的事也走了 JS；两套写法各自处理减少动效，漏一处就失效。改法：悬停改回 CSS，删掉其中一个库。

AI 的报告写：“为实现按钮悬停变色和下拉菜单淡入，已安装 gsap。”你最该怎么回复？

术语的技术定义和行为以这些一手或权威资料为准。

和本知识点经常一起出现的概念。