Framer Motion 完全ガイド - React向け高性能アニメーションライブラリ

Framer Motionとは

Framer Motionは、React向けのプロダクションレディなアニメーションライブラリです。シンプルなAPIで複雑なアニメーションを実現でき、パフォーマンスも優れています。

もともとはデザインツール「Framer」の内部で使用されていたアニメーションエンジンをオープンソース化したもので、実績のある信頼性の高いライブラリです。CSSアニメーションやJavaScriptのrequestAnimationFrameを直接扱う必要がなく、Reactの考え方（宣言的UI）に沿った形でアニメーションを記述できるのが最大の特徴です。

他のアニメーションライブラリとの比較

特徴

• 宣言的なAPI: animate、initial、exitなどのpropsでアニメーションを定義。命令的なコードを書く必要がない
• ジェスチャー対応: whileHover、whileTap、whileDragで直感的なインタラクションを簡単に実装
• バリアント: 複数のアニメーション状態を定義し、親子間で自動的に伝播。複雑な連動アニメーションも簡潔に書ける
• レイアウトアニメーション: CSSの変更を自動検出してスムーズにアニメーション。手動でのサイズ計算が不要
• AnimatePresence: DOM要素の削除時にexitアニメーションを実行。React標準では難しい「消える」演出が簡単
• Springアニメーション: 物理ベースの自然な動き。イージング関数を考える必要がなく、直感的なパラメータで調整可能

インストール

Framer Motionは単一パッケージで提供されており、追加の依存関係は不要です。

npm install framer-motion

注意点:

• React 18以上が必要です
• Next.js App Routerで使用する場合、アニメーションを使うコンポーネントには 'use client' ディレクティブが必要です
• SSRと互換性があり、サーバーサイドでも安全に動作します

基本的な使い方

Framer Motionの基本は非常にシンプルです。通常のHTML要素を motion. プレフィックス付きのコンポーネントに置き換えるだけで、アニメーション機能が有効になります。

motion.divコンポーネント

motion.div、motion.span、motion.buttonなど、すべての標準HTMLタグに対応するmotionコンポーネントが用意されています。これらは通常のHTMLタグと同じように使用でき、追加のpropsでアニメーションを定義します。

import { motion } from 'framer-motion';
 
function App() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.5 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.5 }}
    >
      Hello Framer Motion!
    </motion.div>
  );
}

主要なprops

Framer Motionは initial と animate の差分を自動的に計算し、スムーズな補間を行います。transition を省略した場合は、デフォルトでSpringアニメーションが適用されます。

上のデモでは、ページ読み込み時にフェードイン・スケールアップする要素、無限回転する要素、クリックでアニメーションが再生される要素を確認できます。

ホバー・タップアニメーション

ユーザーインタラクションに対する視覚的フィードバックは、UIの品質を大きく左右します。Framer Motionでは、whileHoverとwhileTapを使用して、CSSの:hover疑似クラスでは実現しにくい滑らかなアニメーションを簡単に実装できます。

特にボタンやカードなどのインタラクティブ要素に適用すると、クリック可能であることを直感的に伝え、操作した際の満足感を高めることができます。

<motion.button
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.95 }}
  transition={{ type: 'spring', stiffness: 400, damping: 17 }}
>
  クリック！
</motion.button>

上のデモでは、ホバー時の拡大・回転、グラデーション変化、そしてSpringアニメーションを使ったボタンの押し込み効果を確認できます。

使用可能なジェスチャーprops

ポイント: whileHoverとwhileTapを組み合わせることで、ホバー時に拡大、タップ時に縮小という自然な押しボタンの動きを表現できます。

トランジション設定

transitionプロパティは、アニメーションの**「どのように動くか」**を制御します。Framer Motionでは、主に2種類のアニメーションタイプが用意されています。

Springアニメーション

Springアニメーションは、Framer Motionのデフォルトのアニメーションタイプです。物理ベースのバネシミュレーションにより、自然で心地よい動きを実現します。

従来のイージング関数（ease-in-outなど）とは異なり、終了時間を指定するのではなく、バネの物理特性を指定します。これにより、速度に応じた自然な減速や、跳ね返りの動きを表現できます。

<motion.div
  animate={{ x: 100 }}
  transition={{
    type: 'spring',
    stiffness: 500,  // バネの硬さ（高いほど速く動く）
    damping: 15,     // 減衰（低いほど跳ねる）
    mass: 1          // 質量（高いほど重く動く）
  }}
/>

Springパラメータの詳細

上のデモで各ボールをクリックすると、stiffnessとdampingの組み合わせによる動きの違いを確認できます。

Tweenアニメーション

従来のキーフレームベースのアニメーションです。正確な時間制御が必要な場合や、無限ループするアニメーションに適しています。

<motion.div
  animate={{ rotate: 360 }}
  transition={{
    type: 'tween',
    duration: 2,
    ease: 'easeInOut',
    repeat: Infinity
  }}
/>

主なイージング関数

Spring vs Tween の使い分け:

• Spring: ユーザー操作への反応、自然な動きが欲しい時
• Tween: 正確な時間制御、無限ループ、シーケンシャルなアニメーション

バリアント（Variants）

バリアントは、アニメーション状態に名前を付けて再利用可能にする仕組みです。複数の要素で同じアニメーションパターンを使いたい場合や、親子間でアニメーションを連動させたい場合に非常に便利です。

バリアントのメリット

1. コードの再利用: 同じアニメーション定義を複数の要素で共有
2. 親子連動: 親要素のアニメーション状態が自動的に子要素に伝播
3. オーケストレーション: staggerChildrenやdelayChildrenで子要素のタイミングを制御
4. 可読性向上: アニメーションロジックをコンポーネントから分離

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,  // 子要素を0.1秒ずつずらして表示
      delayChildren: 0.2     // 子要素のアニメーション開始を遅延
    }
  }
};
 
const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 }
};
 
function List() {
  return (
    <motion.ul
      variants={containerVariants}
      initial="hidden"
      animate="visible"
    >
      {items.map(item => (
        <motion.li key={item} variants={itemVariants}>
          {item}
        </motion.li>
      ))}
    </motion.ul>
  );
}

上のデモでは、ボタンをクリックすると複数のアイコンが順番にアニメーションします。これがstaggerChildrenの効果です。

staggerChildrenの効果

staggerChildrenを使用すると、子要素のアニメーションを順番に少しずつずらして実行できます。リストやグリッドの表示に最適で、「ドミノ倒し」のような連鎖的なアニメーションを簡単に実現できます。

オーケストレーションオプション

AnimatePresence - 出入りアニメーション

Reactの標準的な条件付きレンダリングでは、要素がアンマウントされると即座にDOMから削除されます。これは、「消える」アニメーションを実装する上で大きな障壁となります。

AnimatePresenceコンポーネントを使用すると、要素がDOMから削除される前にexitアニメーションを実行できます。これにより、モーダルのフェードアウト、リスト項目の削除アニメーション、ページトランジションなど、多くのUI演出が可能になります。

なぜAnimatePresenceが必要なのか

// これだけでは「消える」アニメーションは実行されない
{isVisible && <motion.div animate={{ opacity: 1 }} />}
// isVisibleがfalseになると即座に消える

AnimatePresenceで囲むことで、exitアニメーションが完了するまでDOM要素が保持されます。

import { motion, AnimatePresence } from 'framer-motion';
 
function Modal({ isOpen }) {
  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          initial={{ opacity: 0, scale: 0.8 }}
          animate={{ opacity: 1, scale: 1 }}
          exit={{ opacity: 0, scale: 0.8 }}
          transition={{ type: 'spring' }}
        >
          モーダルコンテンツ
        </motion.div>
      )}
    </AnimatePresence>
  );
}

上のデモでは、「+ 追加」ボタンで要素を追加し、各要素をクリックすると削除されます。削除時にスケールダウンしながらフェードアウトするのがexitアニメーションの効果です。

AnimatePresenceのmode

重要なポイント

• keyプロパティ: AnimatePresenceの直下の要素には必ず一意のkeyを設定してください。Reactがどの要素が追加/削除されたかを判断するために必要です。
• initial=: 初回マウント時のアニメーションを無効にしたい場合に使用します（アコーディオンなど）。

スクロール連動アニメーション

スクロール連動アニメーションは、ユーザーのスクロール操作に応じて要素が変化する演出です。パララックス効果、プログレスバー、スクロールで現れるコンテンツなど、モダンなWebサイトでよく見られる表現を実現できます。

Framer MotionのuseScrollとuseTransformフックを使用すると、スクロール位置を監視し、その値を別の値（opacity、scale、positionなど）に変換してアニメーションに適用できます。

useScrollとuseTransformの関係

1. useScroll: スクロール位置を0〜1の値（progress）として取得
2. useTransform: progressを別の値（opacity, x, scaleなど）にマッピング
3. styleに適用: マッピングされた値をmotion要素のstyleに渡す

import { motion, useScroll, useTransform } from 'framer-motion';
import { useRef } from 'react';
 
function ScrollAnimation() {
  const ref = useRef(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ['start end', 'end start']
  });
 
  // scrollYProgress: 0 → 0.5 → 1 を
  // opacity: 0 → 1 → 0 にマッピング
  const opacity = useTransform(scrollYProgress, [0, 0.5, 1], [0, 1, 0]);
  const scale = useTransform(scrollYProgress, [0, 0.5, 1], [0.8, 1, 0.8]);
 
  return (
    <motion.div ref={ref} style={{ opacity, scale }}>
      スクロールで変化
    </motion.div>
  );
}

上のデモでは、ページをスクロールすると3つの要素がそれぞれ異なる方法でアニメーションします。スクロール進捗バーもuseScrollで実装されています。

useScrollのオプション

const { scrollYProgress } = useScroll({
  target: ref,                         // 監視する要素
  offset: ['start end', 'end start'],  // トリガー位置
  container: containerRef              // スクロールコンテナ（省略時はウィンドウ）
});

offsetの指定方法

offsetは['要素の位置 ビューポートの位置', '要素の位置 ビューポートの位置']の形式で指定します。

パフォーマンスのポイント: useScrollとuseTransformはReactの再レンダリングを発生させずにアニメーションを更新するため、非常に高いパフォーマンスを実現しています。

ドラッグ機能

Framer Motionは、ドラッグ＆ドロップ機能を驚くほど簡単に実装できます。dragpropを追加するだけで、要素をマウスやタッチでドラッグ可能にできます。

ドラッグ機能は、カルーセル、スライダー、並べ替え可能なリスト、スワイプで削除するUI、インタラクティブなチュートリアルなど、様々な場面で活用できます。

基本的な使い方

<motion.div
  drag                                    // ドラッグを有効化
  dragConstraints={{ left: 0, right: 300, top: 0, bottom: 200 }}  // 移動範囲
  dragElastic={0.1}                       // 範囲外でのバウンド量
  dragMomentum={true}                     // 慣性
  whileDrag={{ scale: 1.1 }}              // ドラッグ中のスタイル
/>

上のデモでは、自由にドラッグできる要素、範囲制限付きの要素、X軸のみに移動できる要素を試すことができます。

ドラッグ関連のprops

親要素を範囲として使用する

dragConstraintsにref（参照）を渡すと、その要素の範囲内でのみドラッグ可能になります。

function DraggableInContainer() {
  const constraintsRef = useRef(null);
  
  return (
    <div ref={constraintsRef} style={{ width: 300, height: 200 }}>
      <motion.div
        drag
        dragConstraints={constraintsRef}
      />
    </div>
  );
}

ポイント: dragElasticを0に設定すると、範囲外に出ようとしても完全に制限されます。1に近づけると、範囲外に引っ張ってから跳ね返る「ゴムバンド」のような動きになります。

レイアウトアニメーション

レイアウトアニメーションは、Framer Motionの最も強力な機能の一つです。通常、CSSでサイズや位置の変化をアニメーションさせるには、変更前後の値を計算し、適切なtransitionを設定する必要があります。

layoutpropを使用すると、Framer Motionが自動的に変更を検出し、スムーズにアニメーションします。開発者は何も計算する必要がありません。

layoutプロパティの仕組み

1. Reactが再レンダリングを実行
2. Framer Motionが要素の新しい位置・サイズを計算
3. 変更前の状態から変更後の状態へ自動的にアニメーション

<motion.div layout>
  {isExpanded ? <ExpandedContent /> : <CollapsedContent />}
</motion.div>

これだけで、コンテンツの切り替え時にサイズがスムーズにアニメーションします。

layoutIdによる共有要素トランジション

layoutIdは、異なる場所にある要素同士を「同じもの」として認識させる機能です。リストからモーダルへの展開、タブ切り替え時のインジケーター移動など、「要素が移動する」演出を簡単に実現できます。

これは、ネイティブアプリでよく見られる「Shared Element Transition」をWebで実現するものです。

// カードリスト
{items.map(item => (
  <motion.div
    layoutId={`card-${item.id}`}
    onClick={() => setSelected(item.id)}
  >
    {item.title}
  </motion.div>
))}
 
// モーダル
<AnimatePresence>
  {selected && (
    <motion.div layoutId={`card-${selected}`}>
      <ExpandedCard />
    </motion.div>
  )}
</AnimatePresence>

上のデモでは、2つの機能を確認できます：

1. layoutId: カードをクリックすると、リスト内のカードがモーダルに「変形」するように見える
2. layout: 下部の要素をクリックすると、サイズ変更がスムーズにアニメーション

layoutの種類

実践的なパターン

ここでは、実際のプロジェクトでよく使われるアニメーションパターンを紹介します。これらのコードスニペットは、そのままコピーして使用したり、カスタマイズのベースとして活用できます。

ページトランジション

ページ間の移動時にアニメーションを追加すると、アプリケーション全体の一体感が向上します。Next.jsのPages Routerを使用している場合、_app.tsxでAnimatePresenceを使用します。

// _app.tsx (Next.js Pages Router)
import { AnimatePresence, motion } from 'framer-motion';
 
function MyApp({ Component, pageProps, router }) {
  return (
    <AnimatePresence mode="wait">
      <motion.div
        key={router.route}
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        exit={{ opacity: 0, y: -20 }}
        transition={{ duration: 0.3 }}
      >
        <Component {...pageProps} />
      </motion.div>
    </AnimatePresence>
  );
}

スクロールで表示されるセクション

ランディングページやブログ記事で、スクロールに応じてコンテンツがフェードインする演出です。whileInViewとviewportを組み合わせます。

function Section({ children }) {
  return (
    <motion.section
      initial={{ opacity: 0, y: 50 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: '-100px' }}
      transition={{ duration: 0.6 }}
    >
      {children}
    </motion.section>
  );
}

ポイント:

• viewport.once: true: 一度表示されたら再度アニメーションしない（パフォーマンス向上）
• viewport.margin: トリガー位置を調整（'-100px'で画面に入る100px前にアニメーション開始）

ローディングスピナー

無限回転するローディングスピナーです。repeat: Infinityで永続的にアニメーションします。

const spinnerVariants = {
  animate: {
    rotate: 360,
    transition: {
      duration: 1,
      repeat: Infinity,
      ease: 'linear'
    }
  }
};
 
function Spinner() {
  return (
    <motion.div
      variants={spinnerVariants}
      animate="animate"
      style={{
        width: 40,
        height: 40,
        border: '3px solid #e0e0e0',
        borderTop: '3px solid #667eea',
        borderRadius: '50%'
      }}
    />
  );
}

アコーディオン

FAQやサイドメニューでよく使われるアコーディオンです。height: 'auto'へのアニメーションはCSSでは難しいですが、Framer Motionなら簡単に実現できます。

function Accordion({ title, children, isOpen, onToggle }) {
  return (
    <div>
      <button onClick={onToggle}>{title}</button>
      <AnimatePresence initial={false}>
        {isOpen && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: 'auto', opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.3 }}
            style={{ overflow: 'hidden' }}
          >
            {children}
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

ポイント:

• initial={false}: AnimatePresenceに渡すと、初回マウント時のアニメーションをスキップ
• overflow: 'hidden': 高さが変化する際にコンテンツがはみ出さないようにする

パフォーマンス最適化

Framer Motionは高度に最適化されていますが、使い方によってはパフォーマンスに影響を与えることがあります。以下のベストプラクティスを守ることで、60fpsのスムーズなアニメーションを維持できます。

1. transform系のプロパティを優先

x、y、scale、rotate、opacityはGPUアクセラレーションが効くため高速です。これらはブラウザの「コンポジットレイヤー」で処理され、メインスレッドをブロックしません。

一方、width、height、top、leftなどは**レイアウト再計算（リフロー）**が発生するため、特に多数の要素がある場合に処理が重くなります。

// ✅ Good: transform系（GPU処理）
<motion.div animate={{ x: 100, scale: 1.2 }} />
 
// ❌ Avoid: レイアウト系（リフロー発生）
<motion.div animate={{ width: 200, left: 100 }} />

2. layoutプロパティの最適化

layoutプロパティは便利ですが、必要以上に使用するとパフォーマンスに影響します。位置またはサイズの一方だけが変化する場合は、適切な値を指定しましょう。

// position/sizeのどちらかだけ必要な場合
<motion.div layout="position" />  // 位置のみ
<motion.div layout="size" />      // サイズのみ

3. 不要な再レンダリングを避ける

Reactのstate更新は再レンダリングを引き起こしますが、useMotionValueを使用するとReactの再レンダリングなしでアニメーション値を更新できます。これは、ドラッグやスクロールなど、頻繁に値が変化する場面で特に有効です。

// useMotionValueを使用して再レンダリングを回避
import { motion, useMotionValue, useTransform } from 'framer-motion';
 
function OptimizedComponent() {
  const x = useMotionValue(0);
  const opacity = useTransform(x, [-100, 0, 100], [0, 1, 0]);
 
  // xが変化してもReactの再レンダリングは発生しない
  return <motion.div style={{ x, opacity }} drag="x" />;
}

その他のヒント

• 大量の要素: リストに100以上の要素がある場合、すべてにアニメーションを適用するのは避ける
• will-change: Framer Motionは自動的にwill-changeを設定するため、手動で追加する必要はない
• reduce-motion: prefers-reduced-motionメディアクエリを尊重し、アクセシビリティに配慮する

まとめ

Framer Motionは、Reactアプリケーションにアニメーションを追加するための最も強力で使いやすいライブラリの一つです。宣言的なAPIにより、複雑なアニメーションも直感的に実装でき、パフォーマンスも最適化されています。

Framer Motionの強み

使い分けの目安

次のステップ

1. 基本をマスター: animate、initial、transitionを使った簡単なアニメーションから始める
2. ジェスチャーを追加: whileHover、whileTapでインタラクティブ性を向上
3. バリアントを活用: 複数の要素を連動させるアニメーションを実装
4. 高度な機能に挑戦: AnimatePresence、useScroll、layoutで本格的なアニメーションを構築

Framer Motionを使いこなして、ユーザー体験を向上させるアニメーションを実装しましょう！

参考リンク

• Motion公式ドキュメント
• Framer Motion GitHub
• Motion Examples