動かす・止める（Motion）
このページでは、GSAP（Draggable・MotionPath）とFramer Motionを使ったドラッグ・マウス追従・経路アニメーション・回転のインタラクティブな動きの実装パターンをデモとコードで確認できます。
インタラクティブなアニメーションは、ユーザーの操作（ドラッグ・マウス移動）や設定した経路に沿って要素を動かす表現。UIのフィードバックや没入感のある演出に使われる。
GSAPはDraggable・MotionPathプラグインで高度な制御が可能。Framer MotionはReactネイティブなdrag APIで直感的に実装できる。経路アニメーションはGSAPのMotionPathが圧倒的に得意な領域。
Framer Motion
実装方法の比較
| 項目 | Framer Motion | GSAP |
|---|---|---|
| ドラッグ | drag propで宣言的に実装。dragConstraintsで範囲制限 | Draggableプラグイン。bounds・typeで細かく制御 |
| マウス追従 | useMotionValueとuseSpringでスムーズに追従 | mousemoveイベント＋gsap.to()でquickToを使うと高パフォーマンス |
| 経路アニメーション | 非対応（手動実装が必要） | MotionPathプラグインでSVGパスに沿って移動 |
| 回転 | rotateプロパティで宣言的に指定 | rotation・rotationX・rotationYで3D回転も対応 |
🤖 AIプロンプトテンプレート
Next.js + GSAP でインタラクティブアニメーションを実装してください。 - Draggableプラグインでドラッグ可能な要素を実装 - MotionPathプラグインでSVGパスに沿ったアニメーション - マウス追従アニメーション（quickTo使用） - useGSAPフックとcontextSafeを使用 - TypeScript / Tailwind CSS v4 を使用
同じカテゴリの他のページ
文字を演出する（Text Animation）| UI Memo
GSAPのSplitText・ScrambleTextで実装する文字アニメーションのサンプル。1文字ずつフェード・スライド・波・スクランブル・バラけて再集合など、テキスト演出のUIパターン実例集。
動きの質感を選ぶ（Easing）
イージングの違いを体験で比較。power・back・bounce・elasticなどGSAP・Framer Motion・CSS Transitionのeaseを一覧・比較できるUIパターン実例集。
スクロールで物語る（Scroll Storytelling）
GSAPのScrollTriggerで実装するスクロール演出のサンプル。scrub・pin・横スクロール・パララックスなど、スクロールに連動した高度なアニメーションのUIパターン実例集。デモ・コード付き。
Zenn