framer motionとは？
framer motionは、ノーコードUIデザインツール・プロトタイピングツール「framer」が提供するオープンソースアニメーションライブラリです。
▼framer motionのURLとGithub
framer motionを使用することで、より簡潔なコードでアニメーションを実装でき、効率的なウェブ開発が可能になります。また、豊富な操作オプションを活用することでカスタマイズの幅が広がり、高い拡張性を持つのも特徴です。
さらに、フレームベースのアニメーションを簡単に管理できる点もframer motionの強みで、コンポーネントベースの開発との相性が非常に良いです。そのため、モダンなフロントエンド開発においても需要が高まっています。
framerについて知りたい方は、「Framerとは？特徴や使い方、料金を解説【ノーコードでウェブサイトを制作】 」をご覧ください。
framer motionと他のアニメーションライブラリとの違い
framerは、Meta社とコミュニティによって開発されたJavaScriptライブラリであるReactを基盤にしたツールです。ウェブサイトのUI設計に用いられるReactは、ソースコードが理解しやすく、編集のしやすさや処理の速さが特徴です。
framer motionと他のアニメーションライブラリとの大きな違いは、Reactで作成されたアプリケーションに特化している点です。
Reactで作成されたアプリケーションであれば、CSSやJavaScriptを直接編集するよりも、アニメーションの設定が簡単かつ直感的に行えます。また、コードの記述が短く済み、読みやすさも向上するため、誤解やミスを減らせる点もframer motionの強みです。
続いてframer motionの特徴をより深く理解するために、メリット・デメリットを解説します。
framer motionのメリット
framer motionは、CSSで直接アニメーションを実装するよりもコーディングの手間を大幅に削減でき、簡単にアニメーションを作成できる点が大きなメリットです。
さらに、ホバリングやアニメーションの期間設定、ページ遷移など、さまざまな種類のアニメーションに対応しているため、ウェブサイトのさまざまな場面でframer motionを活用できます。
framer motionには、参考になるサンプルも豊富に揃っているので、下記のようなサンプルサイトをぜひ参考にしてみてください。
▼framer motionのアニメーションサンプルの例
framer motionのデメリット
framer motionのデメリットの一つは、SSR（サーバーサイドレンダリング）に対応していないことです。SSR非対応とは、サーバーサイドでページの内容を事前にレンダリング（データを処理してテキストや画像などを表示）できないことを意味します。
ページの内容がサーバーサイドでレンダリングされないと、検索エンジンのクローラがコンテンツを正しく解析できない可能性があります。そのため、データの処理に余計な時間がかかり、SEOやAdSenseの審査において不利になる恐れがあります。
SEOについて詳しく知りたい方は、「SEOとは？今日からできる対策と基本となる考え方」をご参照ください。
また、framer motionのパッケージサイズは2.3MBと比較的大きく、ビルドサイズやパフォーマンスに影響を及ぼす可能性がある点もデメリットです。例えば、同じアニメーションライブラリである「react-spring」のパッケージサイズは55.1KBであることからも、そのサイズの大きさがわかります。
framer motionの導入・セットアップ
framer motionを導入・セットアップするには、Node.jsとnpm（またはyarn）のインストールが必要です。Node.js（公式サイト）は、通常ブラウザ内でのみ実行されるJavaScriptをサーバーサイドでも実行可能にするプラットフォームです。
npmとyarnはどちらもNode.jsのパッケージマネージャーであり、ソフトウェアの更新や削除などを簡単に行うためのツールです。これにより、フロントエンドとサーバーサイドで同じJavaScriptを利用でき、エンジニアの作業負担が軽減されます。
framer motionの導入にはnpmとyarnのどちらを使っても問題ありませんが、一般的にはnpmがより広く使用されています。そのため、以下ではnpmを使用したセットアップ手順について解説します。
framer motionのインストール
まずは、framer motionをnpmからインストールするには、下記の方法で行います。
1.Reactのバージョンが18の場合
npm install framer-motion
2.Reactのバージョンが19の場合
npm install framer-motion@12.0.0-alpha.0
framer motionを経由してのインポート
framer motionをインストールしたら、このようにインポートできます。
アニメーションの実装方法
framer motionでは、このようにアニメーションを実装していきます。
以下のように、xの後ろの数値を変化させるだけでアニメーションが自動生成されます。
framer motionで実装できるアニメーションの例
framer motionの導入・セットアップが完了したら、いよいよアニメーションの実装です。ここでは代表的なアニメーションの事例を3つ紹介しますが、公式サイトでは、アニメーションの挙動のほか、さまざまなアニメーションの設定方法について解説しています。あわせてご覧ください。
▼公式サイト
基本的なアニメーション
キャプチャの通り、framer motionでは「animate」に値を指定するだけで、基本的なアニメーションを設定できます。
animateの値を調整することで、アニメーションを自在に制御できます。
また、”transition”で横に細かく動くよう指定することもできます。
さらに、徐々に要素が表示されていくアニメーションや、要素が飛び出てくるアニメーションも作成可能です。これらの詳細については、framer motionの公式サイトを参照ください。
ジェスチャー
ユーザーの動きに連動したアニメーションを効果的に活用することで、直感的で分かりやすいサイトを作成できます。
ジェスチャーをサイトに取り入れる場合、"while+動作"を設定することで、ユーザーの行動に応じた動作を簡単に追加できます。
例えば、"whileHover"を使えば、ホバー時に対象が浮き上がるアニメーションを実装できます。
引用：Gestures
引用：Gestures
また、"whileTap"を設定することで、タップ時に指定した動作を実装できます。
引用：Gestures
スクロール
スクロールに応じたアニメーションを取り入れることで、ユーザーはページをどこまで読み進めたかわかる上、興味をひく演出も可能です。
例えば、”useScroll”と入力すればスクロールに連動したアニメーションを実装できます。下の例で実装しているのは、スクロールでページの下に移動するほど上の赤色バーが伸びていくアニメーションです。
また、”whileInView”と指定すれば、スクロールにより要素が表示されたときに限りアニメーションを起動できます。
