Motion & Framer Motion

概要

Motion (旧 Framer Motion) は、React と JavaScript 用の本番環境対応のアニメーションライブラリで、宣言的でパフォーマンスの高いアニメーションを最小限のコードで実現します。HTML 要素をアニメーション機能でラップする motion コンポーネントを提供し、ジェスチャー認識(ホバー、タップ、ドラッグ、フォーカス)をサポートし、レイアウトアニメーション、終了アニメーション、スプリング物理演算などの高度な機能を含みます。

このスキルを使用する場合:

• インタラクティブな UI コンポーネントの構築(ボタン、カード、メニュー)
• マイクロインタラクションとホバーエフェクトの作成
• ページ遷移とルートアニメーションの実装
• スクロールベースのアニメーションとパララックスエフェクトの追加
• レイアウト変更のアニメーション(サイズ変更、並び替え、共有要素遷移)
• ドラッグ&ドロップインターフェース
• 複雑なアニメーションシーケンスと状態ベースのアニメーション
• CSS トランジションをより強力で制御可能なアニメーションで置き換える

技術:

• Motion (v11+) - Framer Motion クリエーターによる最新の小規模ライブラリ
• Framer Motion - フル機能の先代(現在も広く使用)
• React 18+ 互換、Vue もサポート
• TypeScript サポート
• Next.js、Vite、Remix、およびすべての最新 React フレームワークで動作

コアコンセプト

1. Motion コンポーネント

motion. をプレフィックスとして付けて、任意の HTML/SVG 要素をアニメーション可能なコンポーネントに変換します:

import { motion } from "framer-motion"

// 通常の HTML が motion コンポーネントになる
<motion.div />
<motion.button />
<motion.svg />
<motion.path />

すべての motion コンポーネントは animate、initial、transition などのアニメーションプロップ、および whileHover、whileTap などのジェスチャープロップを受け入れます。

2. Animate プロップ

animate プロップはターゲットアニメーション状態を定義します。値が変わるとき、Motion は自動的にそれらにアニメーションします:

// シンプルなアニメーション - x 位置が変わる
<motion.div animate={{ x: 100 }} />

// 複数のプロパティ
<motion.div animate={{ x: 100, opacity: 1, scale: 1.2 }} />

// 状態が変わるときにアニメーション
const [isOpen, setIsOpen] = useState(false)
<motion.div animate={{ width: isOpen ? 300 : 100 }} />

3. 初期状態

initial プロップを使用してアニメーション前の初期状態を設定します:

<motion.div
  initial={{ opacity: 0, y: 50 }}
  animate={{ opacity: 1, y: 0 }}
/>

initial={false} を設定して、マウント時の初期アニメーションを無効にします。

4. トランジション

transition プロップを使用して、状態間のアニメーション方法を制御します:

// 期間ベース
<motion.div
  animate={{ x: 100 }}
  transition={{ duration: 0.5, ease: "easeInOut" }}
/>

// スプリング物理演算
<motion.div
  animate={{ scale: 1.2 }}
  transition={{ type: "spring", stiffness: 300, damping: 20 }}
/>

// 異なるプロパティに異なるトランジション
<motion.div
  animate={{ x: 100, opacity: 1 }}
  transition={{
    x: { type: "spring", stiffness: 300 },
    opacity: { duration: 0.2 }
  }}
/>

トランジションタイプ:

• "tween" (デフォルト) - イージング付き期間ベース
• "spring" - 物理ベースのスプリングアニメーション
• "inertia" - 減速アニメーション(ドラッグで使用)

5. バリアント

アニメーション状態を名前付きバリアントで整理して、より綺麗なコードと子要素への伝播を実現します:

const variants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 },
  exit: { opacity: 0, scale: 0.9 }
}

<motion.div
  variants={variants}
  initial="hidden"
  animate="visible"
  exit="exit"
/>

バリアント伝播 - 子要素は自動的に親のバリアント状態を継承します:

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1  // 子のアニメーションをずらす
    }
  }
}

const itemVariants = {
  hidden: { x: -20, opacity: 0 },
  visible: { x: 0, opacity: 1 }
}

<motion.ul variants={containerVariants} initial="hidden" animate="visible">
  <motion.li variants={itemVariants} />
  <motion.li variants={itemVariants} />
  <motion.li variants={itemVariants} />
</motion.ul>

一般的なパターン

1. ホバーアニメーション

whileHover プロップを使用してホバー時にアニメーションします:

// シンプルなホバーエフェクト
<motion.button
  whileHover={{ scale: 1.1 }}
  transition={{ duration: 0.2 }}
>
  Hover me
</motion.button>

// 複数のプロパティ
<motion.div
  whileHover={{
    scale: 1.05,
    backgroundColor: "#f0f0f0",
    boxShadow: "0px 10px 30px rgba(0, 0, 0, 0.2)"
  }}
>
  Hover card
</motion.div>

// カスタムトランジション付き
<motion.button
  whileHover={{
    scale: 1.2,
    transition: { duration: 0.1 }  // ジェスチャー開始のトランジション
  }}
  transition={{ duration: 0.5 }}  // ジェスチャー終了のトランジション
>
  Button
</motion.button>

ネストされた要素でのホバー:

<motion.div whileHover="hover" variants={cardVariants}>
  <motion.h3 variants={titleVariants}>Title</motion.h3>
  <motion.img variants={imageVariants} />
</motion.div>

2. タップ/プレスアニメーション

whileTap プロップを使用してタップ/プレス時にアニメーションします:

// タップで縮小
<motion.button
  whileTap={{ scale: 0.9 }}
>
  Click me
</motion.button>

// ホバー + タップの組み合わせ
<motion.button
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.95, rotate: 3 }}
>
  Interactive button
</motion.button>

// バリアント付き
const buttonVariants = {
  rest: { scale: 1 },
  hover: { scale: 1.1 },
  pressed: { scale: 0.95 }
}

<motion.button
  variants={buttonVariants}
  initial="rest"
  whileHover="hover"
  whileTap="pressed"
>
  Button
</motion.button>

3. ドラッグインタラクション

drag プロップで要素をドラッグ可能にします:

// 基本的なドラッグ(両軸)
<motion.div drag />

// 軸に制限
<motion.div drag="x" />  // 水平のみ
<motion.div drag="y" />  // 垂直のみ

// ドラッグ制約
<motion.div
  drag
  dragConstraints={{ left: -100, right: 100, top: -100, bottom: 100 }}
/>

// 親の制約でドラッグ
<motion.div ref={constraintsRef}>
  <motion.div drag dragConstraints={constraintsRef} />
</motion.div>

// ドラッグ中の視覚的フィードバック
<motion.div
  drag
  whileDrag={{
    scale: 1.1,
    boxShadow: "0px 10px 20px rgba(0,0,0,0.2)",
    cursor: "grabbing"
  }}
  dragElastic={0.1}  // 制約外でドラッグするときの弾力性
  dragTransition={{ bounceStiffness: 600, bounceDamping: 20 }}
/>

ドラッグイベント:

<motion.div
  drag
  onDragStart={(event, info) => console.log(info.point)}
  onDrag={(event, info) => console.log(info.offset)}
  onDragEnd={(event, info) => console.log(info.velocity)}
/>

4. 終了アニメーション(AnimatePresence)

AnimatePresence を使用して、要素が DOM から削除されるときにアニメーションします:

import { AnimatePresence } from "framer-motion"

// 基本的な終了アニメーション
<AnimatePresence>
  {isVisible && (
    <motion.div
      key="modal"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    />
  )}
</AnimatePresence>

主な要件:

• コンポーネントは <AnimatePresence> の直接の子である必要があります
• 一意の key プロップが必須です
• exit プロップを使用して終了アニメーションを定義します

終了アニメーション付きリスト項目:

<AnimatePresence>
  {items.map(item => (
    <motion.li
      key={item.id}
      initial={{ opacity: 0, x: -50 }}
      animate={{ opacity: 1, x: 0 }}
      exit={{ opacity: 0, x: 50 }}
      layout  // スムーズなレイアウトシフト
    >
      {item.name}
    </motion.li>
  ))}
</AnimatePresence>

ずらされた終了アニメーション:

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      when: "beforeChildren",
      staggerChildren: 0.1
    }
  },
  exit: {
    opacity: 0,
    transition: {
      when: "afterChildren",
      staggerChildren: 0.05,
      staggerDirection: -1  // 逆順
    }
  }
}

<AnimatePresence>
  {show && (
    <motion.div variants={containerVariants} initial="hidden" animate="visible" exit="exit">
      <motion.div variants={itemVariants} />
      <motion.div variants={itemVariants} />
      <motion.div variants={itemVariants} />
    </motion.div>
  )}
</AnimatePresence>

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

layout プロップでレイアウト変更(位置、サイズ)を自動的にアニメーションします:

// すべてのレイアウト変更をアニメーション
<motion.div layout />

// 位置の変更のみをアニメーション
<motion.div layout="position" />

// サイズの変更のみをアニメーション
<motion.div layout="size" />

グリッドレイアウトアニメーション:

const [columns, setColumns] = useState(3)

<motion.div className="grid">
  {items.map(item => (
    <motion.div
      key={item.id}
      layout
      transition={{ layout: { duration: 0.3, ease: "easeInOut" } }}
    />
  ))}
</motion.div>

共有レイアウトアニメーション(layoutId):

layoutId を使用して、2つの異なる要素を接続してスムーズな遷移を実現します:

// タブインジケーター例
<nav>
  {tabs.map(tab => (
    <button key={tab.id} onClick={() => setActive(tab.id)}>
      {tab.label}
      {activeTab === tab.id && (
        <motion.div
          layoutId="underline"
          style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 2 }}
        />
      )}
    </button>
  ))}
</nav>

// サムネイルからモーダルを開く
<motion.img
  src={thumbnail}
  layoutId="product-image"
  onClick={() => setExpanded(true)}
/>

<AnimatePresence>
  {expanded && (
    <motion.div layoutId="product-image">
      <img src={fullsize} />
    </motion.div>
  )}
</AnimatePresence>

6. スクロールベースのアニメーション

whileInView を使用して、ビューポート内に要素が入るときにアニメーションします:

<motion.div
  initial={{ opacity: 0, y: 50 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, amount: 0.8 }}  // once: 一度だけトリガー、amount: 80%表示
  transition={{ duration: 0.5 }}
>
  スクロールして表示されるときにアニメーション
</motion.div>

ビューポートオプション:

• once: true - アニメーションは一度だけトリガー
• amount: 0.5 - 表示されている要素の割合(0-1)、または"some" | "all"
• margin: "-100px" - ビューポート境界のオフセット

ずらされたスクロールアニメーション:

<motion.ul
  initial="hidden"
  whileInView="visible"
  viewport={{ once: true, amount: 0.3 }}
  variants={{
    visible: {
      opacity: 1,
      transition: { staggerChildren: 0.1 }
    },
    hidden: { opacity: 0 }
  }}
>
  <motion.li variants={itemVariants} />
  <motion.li variants={itemVariants} />
  <motion.li variants={itemVariants} />
</motion.ul>

7. スプリングアニメーション

スプリング物理演算を使用して自然で跳ねるようなアニメーションを実現します:

// 基本的なスプリング
<motion.div
  animate={{ scale: 1.2 }}
  transition={{ type: "spring" }}
/>

// スプリング物理演算をカスタマイズ
<motion.div
  animate={{ x: 100 }}
  transition={{
    type: "spring",
    stiffness: 300,  // 高いほど速く、よりスナッピー(デフォルト: 100)
    damping: 20,     // 高いほど跳ねが少ない(デフォルト: 10)
    mass: 1,         // 高いほど慣性が大きい(デフォルト: 1)
  }}
/>

// 視覚的期間(より簡単なスプリング制御)
<motion.div
  animate={{ rotate: 90 }}
  transition={{
    type: "spring",
    visualDuration: 0.5,  // 知覚される期間
    bounce: 0.25          // 跳ねる度合い(0-1、デフォルト: 0.25)
  }}
/>

スプリングプリセット:

• Gentle: stiffness: 100, damping: 20
• Wobbly: stiffness: 200, damping: 10
• Stiff: stiffness: 400, damping: 30
• Slow: stiffness: 50, damping: 20

ジェスチャー認識

Motion は宣言的なジェスチャーハンドラーを提供します:

ジェスチャープロップ

<motion.div
  whileHover={{ scale: 1.1 }}        // ポインターが要素の上にある
  whileTap={{ scale: 0.9 }}          // プライマリポインターが要素を押す
  whileFocus={{ outline: "2px" }}    // 要素がフォーカスを得る
  whileDrag={{ scale: 1.1 }}         // 要素がドラッグされている
  whileInView={{ opacity: 1 }}       // 要素がビューポート内にある
/>

ジェスチャーイベント

<motion.div
  onHoverStart={(event, info) => {}}
  onHoverEnd={(event, info) => {}}
  onTap={(event, info) => {}}
  onTapStart={(event, info) => {}}
  onTapCancel={(event, info) => {}}
  onDragStart={(event, info) => {}}
  onDrag={(event, info) => {}}
  onDragEnd={(event, info) => {}}
  onViewportEnter={(entry) => {}}
  onViewportLeave={(entry) => {}}
/>

イベント情報オブジェクトには以下が含まれます:

• point: { x, y } - ページ座標
• offset: { x, y } - ドラッグ開始からのオフセット
• velocity: { x, y } - ドラッグ速度

フック

useAnimate

useAnimate フックを使用してアニメーションを手動制御します:

import { useAnimate } from "framer-motion"

function Component() {
  const [scope, animate] = useAnimate()

  useEffect(() => {
    // 複数要素をアニメーション
    animate([
      [scope.current, { opacity: 1 }],
      ["li", { x: 0, opacity: 1 }, { delay: stagger(0.1) }],
      [".button", { scale: 1.2 }]
    ])
  }, [])

  return (
    <div ref={scope}>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
      <button className="button">Click</button>
    </div>
  )
}

アニメーション制御:

const controls = animate(element, { x: 100 })
controls.play()
controls.pause()
controls.stop()
controls.speed = 0.5
controls.time = 0  // 開始位置にシーク

useSpring

スプリングアニメーション motion 値を作成します:

import { useSpring } from "framer-motion"

function Component() {
  const x = useSpring(0, { stiffness: 300, damping: 20 })

  return (
    <motion.div style={{ x }}>
      <button onClick={() => x.set(100)}>Move</button>
    </motion.div>
  )
}

useInView

要素がビューポート内にあるかを検出します:

import { useInView } from "framer-motion"

function Component() {
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true, amount: 0.5 })

  return (
    <div ref={ref}>
      {isInView ? "In view!" : "Not in view"}
    </div>
  )
}

統合パターン

GSAP との組み合わせ

React 状態ベースのアニメーションに Motion を、複雑なタイムラインに GSAP を使用します:

import { motion } from "framer-motion"
import gsap from "gsap"

function Component() {
  const boxRef = useRef()

  const handleClick = () => {
    // 複雑なタイムラインに GSAP を使用
    const tl = gsap.timeline()
    tl.to(boxRef.current, { rotation: 360, duration: 1 })
      .to(boxRef.current, { scale: 1.5, duration: 0.5 })
  }

  return (
    // ホバー/タップ/レイアウトアニメーションに Motion を使用
    <motion.div
      ref={boxRef}
      whileHover={{ scale: 1.1 }}
      onClick={handleClick}
    />
  )
}

React Three Fiber との組み合わせ

Motion 値を使用して 3D オブジェクトをアニメーションします:

import { motion } from "framer-motion"
import { useFrame } from "@react-three/fiber"

function Box() {
  const x = useMotionValue(0)

  useFrame(() => {
    // Motion 値を Three.js 位置と同期
    meshRef.current.position.x = x.get()
  })

  return (
    <>
      <mesh ref={meshRef}>
        <boxGeometry />
        <meshStandardMaterial />
      </mesh>
      <motion.div
        style={{ x }}
        drag="x"
        dragConstraints={{ left: -5, right: 5 }}
      />
    </>
  )
}

フォームライブラリとの組み合わせ

フォーム検証状態をアニメーションします:

import { motion, AnimatePresence } from "framer-motion"

function FormField({ error }) {
  return (
    <div>
      <motion.input
        animate={{
          borderColor: error ? "#ff0000" : "#cccccc",
          x: error ? [0, -10, 10, -10, 10, 0] : 0  // シェイクアニメーション
        }}
        transition={{ duration: 0.4 }}
      />
      <AnimatePresence>
        {error && (
          <motion.p
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
            style={{ color: "#ff0000" }}
          >
            {error}
          </motion.p>
        )}
      </AnimatePresence>
    </div>
  )
}

パフォーマンス最適化

1. トランスフォームプロパティを使用

トランスフォームプロパティ(x、y、scale、rotate)はハードウェアアクセラレーションされます:

// ✅ 良い - ハードウェアアクセラレーション
<motion.div animate={{ x: 100, scale: 1.2 }} />

// ❌ 避けるべき - レイアウト/ペイントをトリガー
<motion.div animate={{ left: 100, width: 200 }} />

2. 個別トランスフォームプロパティ

Motion は個別トランスフォームプロパティをサポートし、より綺麗なコードを実現します:

// 個別プロパティ(Motion 機能)
<motion.div style={{ x: 100, rotate: 45, scale: 1.2 }} />

// 従来の方法(もサポート)
<motion.div style={{ transform: "translateX(100px) rotate(45deg) scale(1.2)" }} />

3. アクセシビリティのための動きの削減

ユーザーの動き削減設定を尊重します:

import { useReducedMotion } from "framer-motion"

function Component() {
  const shouldReduceMotion = useReducedMotion()

  return (
    <motion.div
      animate={{ x: 100 }}
      transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.5 }}
    />
  )
}

4. レイアウトアニメーションパフォーマンス

レイアウトアニメーションは負荷が大きくなります。以下で最適化します:

// アニメーション対象を指定
<motion.div layout="position" />  // 位置のみ、サイズは含まない

// トランジションを最適化
<motion.div
  layout
  transition={{
    layout: { duration: 0.3, ease: "easeOut" }
  }}
/>

5. layoutId を控えめに使用

layoutId は共有レイアウトアニメーションを作成しますが、グローバルに要素を追跡します。必要な時のみ使用します。

よくある落とし穴

1. 終了アニメーションで AnimatePresence を忘れる

問題: 終了アニメーションが機能しない

// ❌ 間違い - AnimatePresence がない
{show && <motion.div exit={{ opacity: 0 }} />}

// ✅ 正しい - AnimatePresence でラップ
<AnimatePresence>
  {show && <motion.div exit={{ opacity: 0 }} />}
</AnimatePresence>

2. リストで key プロップを忘れる

問題: AnimatePresence が要素を追跡できない

// ❌ 間違い - key がない
<AnimatePresence>
  {items.map(item => <motion.div exit={{ opacity: 0 }} />)}
</AnimatePresence>

// ✅ 正しい - 一意のキー
<AnimatePresence>
  {items.map(item => (
    <motion.div key={item.id} exit={{ opacity: 0 }} />
  ))}
</AnimatePresence>

3. トランスフォーム以外のプロパティをアニメーション

問題: アニメーションがギクシャク、パフォーマンスが低い

// ❌ 回避 - ハードウェアアクセラレーションされない
<motion.div animate={{ top: 100, left: 50, width: 200 }} />

// ✅ より良い - トランスフォームを使用
<motion.div animate={{ x: 50, y: 100, scaleX: 2 }} />

4. レイアウトアニメーションの過度な使用

問題: レイアウトアニメーション要素が多いときのパフォーマンス問題

// ❌ レイアウトアニメーションが多すぎる
{items.map(item => <motion.div layout>{item}</motion.div>)}

// ✅ レイアウトアニメーションが必要な場所でのみ使用、他を最適化
{items.map(item => (
  <motion.div
    key={item.id}
    animate={{ opacity: 1 }}  // より安いアニメーション
    exit={{ opacity: 0 }}
  />
))}

5. 複雑なアニメーションでバリアントを使用しない

問題: アニメーションコードの重複、子の調整ができない

// ❌ 繰り返し
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} />
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} />

// ✅ バリアントを使用
const variants = {
  hidden: { opacity: 0 },
  visible: { opacity: 1 }
}

<motion.div variants={variants} initial="hidden" animate="visible" />
<motion.div variants={variants} initial="hidden" animate="visible" />

6. 不正なトランジションタイミング

問題: トランジションが特定のジェスチャーに適用されない

// ❌ 間違い - 一般的なトランジションは whileHover に適用されない
<motion.div
  whileHover={{ scale: 1.2 }}
  transition={{ duration: 1 }}  // これは animate プロップに適用、whileHover には非適用
/>

// ✅ 正しい - whileHover 内またはジェスチャー別トランジション
<motion.div
  whileHover={{
    scale: 1.2,
    transition: { duration: 0.2 }  // ホバー開始に適用
  }}
  transition={{ duration: 0.5 }}  // ホバー終了に適用
/>

リソース

公式ドキュメント

• Motion Docs - 公式 Motion ドキュメント
• Framer Motion Docs - Framer Motion(レガシー)
• Motion GitHub - ソースコードと例

バンドルされたリソース

このスキルには以下が含まれます:

references/

• api_reference.md - Motion API リファレンス全体
• variants_patterns.md - バリアントパターンと調整
• gesture_guide.md - 包括的なジェスチャーハンドリングガイド

scripts/

• animation_generator.py - Motion コンポーネントボイラープレートを生成
• variant_builder.py - インタラクティブなバリアント設定ツール

assets/

• starter_motion/ - Motion + Vite の完全なスターターテンプレート
• examples/ - 実世界の Motion コンポーネントパターン

コミュニティリソース

• Motion Dev Discord - 公式コミュニティ
• Framer Motion Examples - インタラクティブな例
• Motion Recipes - 一般的なパターン
• CodeSandbox Templates - ライブデモ