Framer Motion入門 — React アニメーションの定番ライブラリ
<motion.div> に whileHover や animate などの props を渡すだけで、複雑なアニメーションが驚くほど簡潔に実装できます。本ガイドでは、Framer Motion の中核となる5つの機能を、Motion Lab の実例とともに解説します。
motion コンポーネントと initial / animate
Framer Motion の基本は motion. プレフィックス付きの要素です。<motion.div> に initial（初期状態）と animate（目標状態）を渡すと、マウント時に自動で補間アニメーションが走ります。
例: initial={{ opacity: 0, y: 24 }} animate={{ opacity: 1, y: 0 }} で「下からフェードイン」。transition で duration や ease を細かく制御できます。
実装デモ：Framer Fade Up
whileHover / whileTap — インタラクティブな状態
whileHover whileTap はホバー中・タップ中だけ適用される状態です。CSS の :hover に近いですが、type: 'spring' を指定すればバネ物理でぬるっと弾みます。
例: whileHover={{ scale: 1.12 }} transition={{ type: 'spring', stiffness: 300 }}。
実装デモ：Framer Spring Hover
variants で stagger（時間差表示）
variants は名前付きの状態セットです。親に staggerChildren を設定すると、子要素が少しずつ遅れて animate され、リストやグリッドの登場が一気に上質になります。
親の show.transition.staggerChildren = 0.12 と、子の hidden/show variant を組み合わせるのが定番パターン。
実装デモ：Framer Stagger List
AnimatePresence — 消える瞬間のアニメーション
React では条件付きレンダリングで要素が DOM から消えると、通常は瞬時に消えます。<AnimatePresence> で包むと exit プロップが効き、消える瞬間にもアニメーションを当てられます。
モーダル・トースト・タブ切替など「閉じる」動きが重要な UI で必須のテクニック。
drag — ドラッグ操作
<motion.div drag> と書くだけで要素がドラッグ可能になります。dragConstraints で可動範囲、dragSnapToOrigin で離したら原点に戻る挙動を制御できます。
カード並べ替え・スワイプ UI・インタラクティブなヒーローに。
実装デモ：Framer Drag
FAQ
Framer Motion と CSS アニメーションはどちらを使う？
Framer Motion は重い？
LazyMotion で必要な機能だけ読み込めます。React 以外でも使える？
CSS だけで近い動きは作れる？
関連書籍
学びを止めない · Amazonサブスク
※ Amazonアソシエイト・プログラム参加。リンク経由のご購入で運営者が紹介料を受け取る場合があります。