动效
页面过渡、手势、滚动动画，以及让编程 Agent 把动画写对的 Skill 和插件。
库 4 · Skill 2 · 插件 1 · 编辑更新 2026-10-10
全部
Motion库React / JS / Vue 动画库：手势、布局过渡、滚动动画，声明式写法。适合：React 项目的交互动效。MIT · motion.devMotion AI Kit插件Motion 官方 AI 工具包：Cursor 插件，或用 npx motion-ai 给 Claude Code 等装上 Motion 技能和文档 MCP。适合：已经选了 Motion，想让 Agent 写对。motion.devGSAP库时间线与 ScrollTrigger 滚动动画，框架无关；被 Webflow 收购后全部插件免费，含商用。适合：复杂时间线、滚动叙事页面。免费商用 · gsap.comgsap-skillsSkillGSAP 官方 Agent Skills：核心 API、时间线、ScrollTrigger、插件，以及 React / Vue / Svelte 里的正确写法。适合：用 GSAP 时一起装。MIT · github.com/greensock/gsap-skillsreact-view-transitionsSkill用 React 的 View Transition API 做路由切换、共享元素和列表重排，不引第三方库。适合：Next.js 页面切换。MIT · github.com/vercel-labs/agent-skillsReact Bits库可复制的动画交互组件：文字特效、背景、卡片与光标效果。适合：落地页的点睛效果，用一两个即可。MIT + Commons Clause · reactbits.devAnime.js库轻量 JavaScript 动画引擎，适合原生 JS 与 SVG 动画。适合：不用 React 的页面。MIT · animejs.com
怎么选
React 项目 先用 Motion；让 Agent 写的话，把 Motion AI Kit 一起装上。
复杂时间线或滚动叙事 选 GSAP，并装 gsap-skills，避免 Agent 写出过时的 Club 插件用法。
Next.js 页面切换 先试 View Transitions：浏览器原生、零依赖，不支持的浏览器自动跳过动画。
少即是多 一个页面只留一处编排好的动效，比处处淡入更像人做的。