Motion vs GSAP: 両方必要か？

ほとんどのReactプロジェクトは、コンポーネントおよび状態駆動のアニメーションにMotionから始め、スクラブ付きスクロールタイムライン、複雑なシーケンシング、SVG/canvasの作業など具体的なニーズが生じた場合にのみGSAPを追加するべきです。

ピン留めされたスクラブ付きスクロールセクションをReactアプリに組み込もうとしたことがある人なら、この疑問が浮かぶ瞬間を知っているはずです。アニメーションは動作するものの、再レンダリングによって消去されてしまい、ライブラリの選択が間違っていたのではないかと考え始めます。両方を併用することはよくあることで、完全にサポートされており、コンテンツが豊富なサイトでは適切な選択であることも多いです。しかし、2つ目のランタイムと2つ目のメンタルモデルというコストが伴うため、デフォルトの選択ではありません。本記事では、実際の選択基準に基づいて両者を比較します。

2つの事実が、古い比較記事の多くを無効にしています。Motion（旧Framer Motion）は現在React、JavaScript、Vueで利用可能となり、framer-motionではなくmotion/reactからインポートします。もはや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はこれを逆転させます。命令的な呼び出しを記述し、タイムライン上にチェーンして、スタッガーやシーケンスを細かく制御します。この違い（結果を記述するか、各ビートを振り付けるか）が、どのツールが特定の問題に適しているかを、いかなるベンチマークよりも正確に予測します。

重要な基準でMotionとGSAPを比較する

フロントエンド開発者がアニメーションライブラリを採用する際に検討する軸、すなわちメンタルモデル、統合、スクロール/タイムライン機能、パフォーマンス、バンドル、フレームワーク対応範囲、ライセンスについて、一対一で比較します。

統合の面では、Motionはコンポーネントベースのアプリのためにつくられています。単一のlayoutpropで任意の2つのレイアウト間をアニメーションし、AnimatePresenceは要素がDOMから削除される際にもアニメーションできるよう要素を生存させます。GSAPはタイムラインとScrollTriggerによってその地位を確立しており、スクロール駆動アニメーションの標準となっています。

パフォーマンスの面では、両者とも一般的な使用において60fpsを目標としており、どちらのベンダーのマーケティングも決定打にはなりません。Motionのハイブリッドエンジンは、Web Animations APIとScrollTimelineを使用してブラウザネイティブでアニメーションを実行し、スプリング物理やジェスチャートラッキングが必要な場合はJavaScriptにフォールバックします。MotionのホームページIでは、そのAPIが「GSAPの代替手段と比べて最大90%小さい」と主張していますが、これはベンダー自身の数値であり、中立的な測定ではありません。マーケティング情報として扱ってください。重要なのは実際のデバイスでの動作です。本番ページのセッションリプレイは、ベンチマークが見逃す障害クラス、すなわちスクロール連動アニメーションでのフレームドロップや、ミッドレンジのスマートフォンでのエントランストランジションによるレイアウトシフトを捉えることができます。

バンドルの面では、両者ともモジュール式です。Motionはツリーシェイク可能で小さなフットプリントを持ち、GSAPのコアは軽量でプラグインをアラカルトで追加できます。ライセンスの面では、MotionはMITライセンスであり、GSAPは現在無料の標準ライセンスで提供されています。

MotionとGSAPはどちらを使うべきか？

状態駆動のUIにはMotionを選んでください。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()のドロップイン代替であり、クリーンアップを自動的に処理し、アイソモーフィックなレイアウトエフェクト手法を使用しているため、コンポーネントがクライアントコンポーネントである限り、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>
  );
}

「両方」を使うコストは現実的です。2つのアニメーションランタイムは、バンドルサイズの増加とチームにおける2つのメンタルモデルを意味します。具体的なニーズが生じた時にのみ2つ目のライブラリを追加し、デフォルトでは追加しないでください。実際には、Motionがボタンやモーダルやレイアウトトランジションを担当し、GSAPはMotionでは対処が難しい1つのスクロールナラティブセクションを処理するという形になります。

結論

Reactアプリのデフォルト推奨：Motionだけで始め、スクラブ付きスクロールタイムライン、複雑なシーケンシング、またはSVG/canvas作業が初めて必要になった時点でGSAPを導入してください。ただし、プロジェクトが主にスクロール駆動のナラティブである場合は、代わりにGSAPから始め、コンポーネント状態アニメーションが増えた場合にのみMotionを使用してください。両者とも現行で、無料で、フレームワーク対応しているため、決定はライセンスではなく適合性に関するものです。主要なアニメーションパターンが示す方を選び、バージョンを固定し（Motion v12.42.2、GSAP v3.15.0）、実際の要件が必要とする場合にのみ2つ目を追加してください。

よくある質問

Framer Motionは終わったのか、何が起きたのか？

Framer Motionは終わっていません。2024年にMotionに改名され、独立したプロジェクトとなり、ReactだけでなくJavaScriptとVueもサポートするよう拡張されました。現在は'framer-motion'ではなく'motion'パッケージをインストールし、'motion/react'からインポートします。MITライセンスのままで、v12系列として積極的にメンテナンスされています。'framer-motion'のインポートを参照している古いチュートリアルは互換性パスを通じて引き続き動作しますが、新しいプロジェクトでは現在のパッケージ名を使用してください。

GSAPはまだ有料か、Club GreenSockライセンスが必要か？

GSAPは現在完全に無料です。SplitText、MorphSVG、DrawSVG、ScrollTrigger、ScrollSmootherなど、以前有料だったすべてのプラグインを含みます。2024年にWebflowがGreenSockを買収した後、2025年4月30日にペイウォールが撤廃され、標準ライセンスが商用利用をカバーするよう拡張されました。Webflowを使用しているかどうかにかかわらず、すべての人が無料で使用できるため、いかなる機能についてもClub GreenSockメンバーシップは不要です。

Next.js App RouterプロジェクトでMotionとGSAPを一緒に使用できるか？

はい。クリーンアップとReact Strict Modeを処理する'@gsap/react'パッケージの公式useGSAP()フックを使用し、App Routerのコンポーネントはデフォルトでサーバーコンポーネントであるため、コンポーネントに'use client'ディレクティブを付けてください。useGSAP()はアイソモーフィックなレイアウトエフェクト手法を使用しているため、クライアントコンポーネントとして実行される限りSSRセーフです。Motionコンポーネントは、状態とレイアウトアニメーションのために同じツリー内で競合なく動作します。

Motionはスクロールトリガーアニメーションをサポートしているか、それともGSAPのScrollTriggerが必要か？

Motionは、useScrollフックとネイティブScrollTimelineを通じてスクロール連動アニメーションをサポートしており、スクロール位置に連動したプログレスバーやパララックスなどの一般的なエフェクトをカバーしています。ピン留め、スナッピング、複雑なタイムラインを伴うスクラブ付きの精密にシーケンスされたスクロールナラティブには、GSAPのScrollTriggerがより多くの制御を提供し、確立された標準となっています。スクロール作業がスクロール進行と値の間の単純な連動であればMotionで十分ですが、振り付けが複雑になった場合はScrollTriggerを使用してください。