framer-motion-best-practices

Community Framer Motion のベストプラクティス

React アプリケーションにおける Framer Motion アニメーションの包括的なパフォーマンス最適化ガイドです。9 カテゴリーにわたる 42 のルールを、影響度の高い順にまとめ、自動リファクタリングとコード生成に役立てます。

適用するタイミング

次のような場合に、これらのガイドラインを参照してください。

• Framer Motion を使って React コンポーネントにアニメーションを追加するとき
• アニメーションを多用するアプリケーションのバンドルサイズを最適化するとき
• アニメーション中の不要な再レンダリングを防ぐとき
• レイアウト遷移や共有要素のアニメーションを実装するとき
• スクロール連動またはジェスチャーベースのインタラクションを構築するとき

優先度別のルールカテゴリー

優先度	カテゴリー	影響度	プレフィックス
1	バンドルの最適化	CRITICAL	bundle-
2	再レンダリングの防止	CRITICAL	rerender-
3	アニメーションプロパティ	HIGH	anim-
4	レイアウトアニメーション	HIGH	layout-
5	スクロールアニメーション	MEDIUM-HIGH	scroll-
6	ジェスチャーの最適化	MEDIUM	gesture-
7	スプリングと物理演算	MEDIUM	spring-
8	SVG とパスのアニメーション	LOW-MEDIUM	svg-
9	終了時のアニメーション	LOW	exit-

クイックリファレンス

1. バンドルの最適化（CRITICAL）

• bundle-lazy-motion - motion の代わりに LazyMotion と m コンポーネントを使用する
• bundle-dynamic-features - モーション機能を動的にインポートする
• bundle-dom-animation - 基本的なアニメーションには domAnimation を使用する
• bundle-use-animate-mini - シンプルなケースには mini useAnimate を使用する
• bundle-strict-mode - 意図しないインポートを検出するために strict mode を有効にする

2. 再レンダリングの防止（CRITICAL）

• rerender-motion-value - useState の代わりに useMotionValue を使用する
• rerender-use-transform - useTransform で値を導出する
• rerender-stable-callbacks - アニメーションのコールバックを安定させる
• rerender-variants-object - バリアントをコンポーネントの外で定義する
• rerender-animate-prop - 安定した animate の値を使用する
• rerender-motion-value-event - モーション値のイベントを使用する

3. アニメーションプロパティ（HIGH）

• anim-transform-properties - transform プロパティをアニメーションする
• anim-opacity-filter - 視覚効果には opacity と filter を優先する
• anim-hardware-acceleration - ハードウェアアクセラレーションを活用する
• anim-will-change - willChange prop を適切に使用する
• anim-independent-transforms - transform を個別にアニメーションする
• anim-keyframes-array - シーケンスにはキーフレーム配列を使用する

4. レイアウトアニメーション（HIGH）

• layout-dependency - 測定を制限するために layoutDependency を使用する
• layout-position-size - 適切に layout="position" または "size" を使用する
• layout-group - 関連するレイアウトアニメーションをグループ化する
• layout-id-shared - 共有要素の遷移に layoutId を使用する
• layout-scroll - スクロール可能な祖先要素に layoutScroll を追加する

5. スクロールアニメーション（中〜高）

• scroll-use-scroll - useScroll フックを使用したスクロール連動アニメーション
• scroll-use-spring-smooth - useSpring による滑らかなスクロールアニメーション
• scroll-element-tracking - 特定の要素がビューポートに入るタイミングを追跡
• scroll-offset-configuration - スクロールオフセットを設定
• scroll-container-ref - 特定のコンテナー内のスクロールを追跡

6. ジェスチャーの最適化（中）

• gesture-while-props - ハンドラーの代わりに whileHover/whileTap を使用
• gesture-variants-flow - ジェスチャーバリアントを子要素に継承
• gesture-drag-constraints - 境界の設定に dragConstraints ref を使用
• gesture-drag-elastic - 自然な操作感になるよう dragElastic を設定
• gesture-tap-cancel - 中断されたジェスチャーには onTapCancel を使用

7. スプリングと物理演算（中）

• spring-physics-based - 中断可能にするため、物理ベースのスプリングを使用
• spring-damping-ratio - 振動を制御するよう減衰を設定
• spring-mass-inertia - 重い、または軽い操作感になるよう質量を調整
• spring-use-spring-hook - リアクティブな値に useSpring を使用

8. SVG とパスアニメーション（低〜中）

• svg-path-length - 線を描くアニメーションに pathLength を使用
• svg-motion-components - motion.path と motion.circle を使用
• svg-viewbox-animation - ズーム効果を得るために viewBox をアニメーション化
• svg-morph-matching-points - モーフィングする図形の点の数を一致させる

9. 終了アニメーション（低）

• exit-animate-presence - 条件付きレンダリングを AnimatePresence でラップ
• exit-unique-keys - AnimatePresence の子要素に一意のキーを指定
• exit-mode-wait - 連続したトランジションには mode="wait" を使用

使用方法

詳しい説明とコード例については、各リファレンスファイルを参照してください。

• セクションの定義 - カテゴリーの構成と影響度
• ルールのテンプレート - 新しいルールを追加するためのテンプレート

リファレンスファイル

ファイル	説明
references/_sections.md	カテゴリーの定義と順序
assets/templates/_template.md	新しいルール用のテンプレート
metadata.json	バージョンとリファレンス情報