Motion vs GSAP：你需要同时使用两者吗？

大多数 React 项目应该从 Motion 开始，用于组件和状态驱动的动画，仅在出现具体需求时才引入 GSAP——例如需要精确控制的滚动时间轴、复杂的序列动画，或 SVG/canvas 相关工作。

任何曾经尝试在 React 应用中接入固定滚动（pinned scrubbed scroll）区块的开发者都知道那个令人头疼的时刻：动画运行正常，一次重新渲染就将其清除，你开始怀疑自己是否选错了库。同时使用两者是常见做法，完全受支持，对于内容密集型网站来说往往也是正确选择，但这意味着引入第二个运行时和第二套思维模型，因此不应作为默认方案。本文将从真正影响决策的维度对两者进行比较。

有两个事实使大多数旧有比较失去参考价值。Motion（前身为 Framer Motion）现已支持 React、JavaScript 和 Vue，并从 motion/react 导入，而非 framer-motion。它不再是 React 专属库。此外，GSAP 也不再需要付费：得益于 Webflow 的支持，整个 GSAP 工具集现已完全免费，包括此前仅限 Club GSAP 会员使用的所有附加插件，如 SplitText 和 MorphSVG，商业用途同样适用。

Motion 和 GSAP 有何不同？

思维模型的差异决定了一切。Motion 是声明式的（你描述目标状态，库负责插值过渡），而 GSAP 是命令式且基于时间轴驱动的，你可以对时序和缓动进行精细控制，逐步编排每个动画步骤。

在 Motion 中，你将目标值设置为 props，库自动处理过渡效果：

import { motion } from "motion/react";

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.4 }}
/>

当 animate 中的值发生变化时，Motion 会自动在它们之间进行过渡；x 和 scale 等物理属性默认使用弹簧物理效果，而 opacity 等视觉属性则使用补间缓动。GSAP 则与之相反：你编写命令式调用，并将它们链接在时间轴上，实现交错、有序的精细控制。这种差异——描述结果 vs 编排每个节拍——比任何基准测试都更能预测哪个工具更适合特定问题。

从关键维度比较 Motion 与 GSAP

以下是前端开发者在选用动画库时所关注的核心维度的正面对比：思维模型、集成方式、滚动/时间轴支持、性能、包体积、框架兼容性以及许可证。

在集成方面，Motion 专为组件化应用而生：通过单个 layout prop 即可在任意两个布局之间实现动画过渡，AnimatePresence 则可在元素离开 DOM 时保持其存活，从而实现退出动画。GSAP 的核心优势在于时间轴和 ScrollTrigger，后者是滚动驱动动画的行业标准。

在性能方面，两者在典型使用场景下均以 60fps 为目标，任何一方的营销材料都无法给出定论。Motion 的混合引擎通过 Web Animations API 和 ScrollTimeline 在浏览器中原生运行动画，在需要弹簧物理效果或手势追踪时降级为 JavaScript。Motion 官网声称其 API “比 GSAP 对应实现小多达 90%“，但这是厂商自己的数据，并非中立测量结果，应将其视为营销说辞。真正重要的是在真实设备上的表现。对生产页面进行会话回放（session replay）能捕捉到基准测试遗漏的问题类型：滚动联动动画中的丢帧，或中低端手机上入场过渡引起的布局偏移。

在包体积方面，两者均支持模块化。Motion 支持 tree-shaking，体积轻量；GSAP 核心包同样轻巧，插件按需引入。在许可证方面，Motion 采用 MIT 许可证，GSAP 现在以免费标准许可证发布。

什么时候该用 Motion，什么时候该用 GSAP？

选择 Motion 用于状态驱动的 UI 动画：通过 AnimatePresence 实现进入/退出过渡、自动布局动画、手势交互，以及组件树内的页面过渡。它与 React 的渲染周期天然契合，动画可以响应状态和 props 的变化，无需手动连接。

选择 GSAP 用于精确控制的序列化场景：基于 ScrollTrigger 的滚动叙事、交错时间轴动画，以及 Motion 不涉及的 SVG 或 canvas 动画。GSAP 可以对 CSS、SVG、canvas、React、Vue、WebGL、颜色、字符串和运动路径进行动画处理，这种广度正是营销网站和数据可视化工作所依赖的。两个库都支持 prefers-reduced-motion，因此无障碍访问性不是决策的分水岭，应将其视为两者共同的责任。

你需要同时使用两者吗？

是的：同时运行两者是常见且完全受支持的做法——Motion 负责组件级微交互，GSAP 负责滚动和时间轴场景。这种组合在 React 中是一等公民方案。来自 @gsap/react 包的 useGSAP() 可直接替换 useEffect()/useLayoutEffect()，自动处理清理工作，并采用同构布局效果（isomorphic layout-effect）技术，因此在服务端渲染环境（包括 Next.js App Router）中是安全的——前提是该组件为客户端组件：

"use client";
import { useRef } from "react";
import gsap from "gsap";
import { useGSAP } from "@gsap/react";

gsap.registerPlugin(useGSAP);

function Hero() {
  const container = useRef(null);
  useGSAP(() => {
    gsap.from(".title", { y: 40, opacity: 0, duration: 0.6 });
  }, { scope: container });

  return (
    <section ref={container}>
      <h1 className="title">Hello</h1>
    </section>
  );
}

“两者并用”的代价是真实存在的：两个动画运行时意味着累加的包体积，以及团队需要维护两套思维模型。只有在出现具体需求时才引入第二个库，而非默认如此。在实践中，这意味着 Motion 承担按钮、模态框和布局过渡的动画，而 GSAP 处理那个 Motion 会让你举步维艰的滚动叙事区块。

结论

React 应用的默认建议：从单独使用 Motion 开始，在首次遇到需要精确控制的滚动时间轴、复杂序列动画或 SVG/canvas 工作时再引入 GSAP。但如果一个项目主要是滚动驱动的叙事内容，则应从 GSAP 开始，仅在组件状态动画需求增长时才考虑 Motion。两者均处于活跃维护状态、完全免费，且具备跨框架能力，因此决策的依据是适配度，而非许可证问题。选择与你主要动画模式相匹配的那个，锁定版本（Motion v12.42.2，GSAP v3.15.0），仅在真实需求驱动时才引入第二个库。

常见问题

Framer Motion 已经停止维护了吗？它经历了什么变化？

Framer Motion 并未停止维护；它于 2024 年更名为 Motion，成为一个独立项目，并将支持范围从 React 扩展到 JavaScript 和 Vue。现在你需要安装 'motion' 包，并从 'motion/react' 导入，而非 'framer-motion'。它仍然采用 MIT 许可证，并在 v12 版本线上积极维护。引用 'framer-motion' 导入的旧版教程仍可通过兼容路径正常使用，但新项目应使用当前的包名。

GSAP 现在还需要付费吗？我还需要 Club GreenSock 许可证吗？

GSAP 现已完全免费，包括所有此前付费的插件，例如 SplitText、MorphSVG、DrawSVG、ScrollTrigger 和 ScrollSmoother。Webflow 于 2024 年收购 GreenSock 后，付费墙于 2025 年 4 月 30 日正式取消，标准许可证也扩展至涵盖商业用途。无论你是否使用 Webflow，该库对所有人均免费开放，任何功能都不再需要 Club GreenSock 会员资格。

我可以在 Next.js App Router 项目中同时使用 Motion 和 GSAP 吗？

可以。使用来自 '@gsap/react' 包的官方 useGSAP() hook，它能处理清理工作和 React Strict Mode 兼容性，并使用 'use client' 指令标记组件——因为 App Router 组件默认为服务端组件。useGSAP() 采用同构布局效果技术，只要在客户端组件中运行，即可安全用于 SSR 环境。Motion 组件可在同一组件树中用于状态和布局动画，两者不会产生冲突。

Motion 支持滚动触发动画吗？我还需要 GSAP 的 ScrollTrigger 吗？

Motion 通过其 useScroll hook 和原生 ScrollTimeline 支持滚动联动动画，可覆盖常见效果，如与滚动位置绑定的进度条和视差效果。对于需要固定（pinning）、吸附（snapping）和复杂时间轴的精确序列化滚动叙事，GSAP 的 ScrollTrigger 提供了更强的控制能力，也是该领域的既定标准。如果你的滚动工作只是将滚动进度与某个值简单绑定，Motion 已经足够；当编排变得复杂时，再考虑使用 ScrollTrigger。