Framer Motionの基本情報

特徴・ポイント

Framer Motionは、ReactアプリケーションにおけるUI要素のアニメーションを簡単かつパワフルに実装できるライブラリです。宣言的なAPIを通じて、複雑なアニメーションでも少ないコード量で実現できます。

ハイブリッドエンジンによる高パフォーマンス

Framer Motionは唯一のハイブリッドエンジンを採用しているため、ネイティブブラウザアニメーションのハードウェアアクセラレーションによる高速なパフォーマンスと、JavaScriptアニメーションの柔軟性の両方を兼ね備えています。これにより、スムーズで環境に優しい120fpsのアニメーションが可能になっています。

直感的なAPI設計

モーションコンポーネント（<motion.div>など）を使用することで、通常のHTML/SVG要素をアニメーション機能で強化できます。animate、whileHover、whileTapなどのプロパティを使って様々な状態に応じたアニメーションを定義でき、コードの可読性を高めます。

高度なアニメーション機能

単純なトランジションだけでなく、以下のような高度な機能も提供します：

• ジェスチャーベースのアニメーション（ホバー、タップ、ドラッグなど）
• スクロール連動アニメーション
• レイアウトアニメーション
• バリアント（名前付きアニメーション定義）
• キーフレームシーケンス
• AnimatePresenceによる要素の出入りアニメーション

利用シーン

Framer Motionの活用場面を紹介します。

インタラクティブなUIコンポーネント

ボタン、メニュー、カードなどのUI要素にホバーやクリック時のアニメーション効果を追加することで、ユーザー体験を向上させることができます。わずか数行のコードで、プロフェッショナルな印象を与えるインタラクションを実装できます。

ページトランジション

ページ間の切り替えをスムーズにアニメーション化することで、ユーザーの操作の文脈を保ちながら、より自然な体験を提供できます。AnimatePresenceコンポーネントを使用することで、要素がDOMから削除される際のアニメーションも制御できます。

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

Webサイトのスクロール位置に連動したアニメーションを実装できます。whileInViewプロパティを使用して要素が表示領域に入った時のアニメーションや、useScrollフックでスクロール位置に基づいた値の変化を作成できます。

技術的特徴

Framer Motionの技術面での強みを理解しましょう。

Reactエコシステムとの統合

Reactのコンポーネントモデルに完全に適合するよう設計されており、Reactの状態やライフサイクルと連携してアニメーションを制御できます。また、React Server Components（RSC）にも対応しています。

型安全性

TypeScriptで書かれており、完全な型定義が提供されているため、IDEの補完機能が効き、型エラーを事前に検出できます。

バンドルサイズの最適化

LazyMotionコンポーネントを使用することで、必要な機能だけを読み込むことができ、アプリケーションのバンドルサイズを削減できます。また、最小限の機能だけを含む「mini」バージョンも提供されています。

補足情報

最近の変更点

2025年初頭に、Framer MotionはFramerから独立し、「Motion」という名前に変更されました。現在は独立したプロジェクトとして、React以外にもVanilla JavaScriptやVueなどへの対応を強化しています。ただし、互換性は維持されており、既存のFramer Motionコードは引き続き動作します。