Framer Motion（フレーマーモーション）は、Web デザインツール Framer を提供する Framer 社が開発する、React 向けのアニメーションライブラリです。前身は「Pose」と呼ばれるライブラリで、Framer Motion として大幅に再設計され、現在は React コミュニティで最もポピュラーなアニメーション選択肢の一つになっています。motion.div のような「アニメ可能なコンポーネント」を提供し、initial / animate / exit といった props にスタイルを書くだけで自然な遷移を実現できる宣言的な API が特徴で、React の哲学にきわめてよく馴染みます。
この記事の目次
- 宣言的な API と motion コンポーネント
- AnimatePresence と layout アニメーション
- ジェスチャーと variants
- ライセンス変更と Motion への発展
- まとめ
宣言的な API と motion コンポーネント
Framer Motion の中心となるのは、motion.div や motion.button のような「拡張版 HTML 要素」です。これらは通常の React 要素と同じように使えますが、initial、animate、exit、transition、whileHover、whileTap といったアニメーション関連の props を受け取り、それらの差分を見て自動的にトゥイーンを生成してくれます。例えば
従来の命令的なアニメーションライブラリでは、ref を取って手続き的にスタイルを操作する必要がありましたが、Framer Motion は React の宣言的レンダリングと同じ世界観で書けるため、状態管理との相性が抜群です。useState や Recoil のような状態が変わったときに、要素のスタイルが変わるのと同じ感覚で、アニメーションも自然に走らせられます。これにより、UI の「現在の見た目」と「アニメーションの状態」を別管理する必要がなくなり、認知コストが大きく下がります。
AnimatePresence と layout アニメーション
Framer Motion の象徴的な機能のひとつが AnimatePresence です。通常の React では、要素を DOM から取り除く瞬間にすでに描画が終わっているため、退場アニメーションを実装するのが面倒でした。AnimatePresence で子要素を包むと、子コンポーネントがアンマウントされる瞬間に exit プロパティに指定したアニメーションを再生し終わるまで実際の DOM 破棄を遅延させてくれます。モーダルやトーストのフェードアウト、リスト要素の削除アニメーションが宣言的にそのまま書けるようになります。
もう一つの強力な機能が layout アニメーションです。
ジェスチャーと variants
Framer Motion はジェスチャーへの対応も豊富で、whileHover や whileTap、whileFocus、whileInView といった props でホバー時・タップ時・フォーカス時・スクロールで画面に入ったときの状態を簡単に書けます。drag を有効にすればポインタやタッチで要素をドラッグでき、慣性付きで物理的に動かす dragConstraints や dragElastic も標準で備わっています。これらを組み合わせるだけで、リッチなマイクロインタラクションを React コンポーネント内で完結させられます。
より大規模なアニメーションを管理するときに役立つのが variants です。アニメーションの状態（visible、hidden、active など）を名前付きで定義し、親から子へ伝播させながら staggerChildren で順番に動かすことができます。これにより、UI の「状態セット」をデザインシステム的に整理でき、複雑なアニメーションも宣言的に保守できるようになります。低レベルに踏み込みたいときは useMotionValue や useTransform を使い、任意の数値を時間軸やスクロール量に紐付けて動かすことも可能です。
ライセンス変更と Motion への発展
近年、Framer Motion は「Motion」ブランドとして再編されつつあり、React 専用のラッパーである motion/react と、フレームワーク非依存のコアである motion 本体が整理されるようになりました。これにより、React 以外の環境（Vue や素の JavaScript）でも同じアニメーションエンジンを利用できるようになり、選択肢が広がっています。Framer 社の有料デザインツール本体とは別に、ライブラリ自体は OSS として広く利用可能で、商用利用も問題ありません（ライセンス詳細は公式の最新情報を参照してください）。
GSAP との比較では、Framer Motion は React に強く統合された宣言的 API、Magic Move のような UI 向け機能、ジェスチャー対応が強みで、一方の GSAP は timeline ベースの精密な振付や ScrollTrigger による豊富なスクロール演出が強みです。React 主体のプロダクトで UI のマイクロインタラクションを中心に組むなら Framer Motion、ブランドサイトのリッチな映画的演出を組むなら GSAP、というように使い分けるのが現実的な選択肢になります。
まとめ
Framer Motion は、React の宣言的な世界観にアニメーションをきれいに溶け込ませた現代的なライブラリです。motion 要素、AnimatePresence、layout アニメーション、variants、ジェスチャーといった機能セットによって、UI のマイクロインタラクションから複雑な遷移までを統一的に記述できます。React ベースのプロダクトでアニメーションを真面目に扱うなら、まず候補に挙がるライブラリです。
※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。
コメント