コミュニティ Framer Motion ベストプラクティス

React アプリケーションの Framer Motion アニメーションに関する包括的なパフォーマンス最適化ガイド。9つのカテゴリ全体に42のルールを含み、自動リファクタリングとコード生成をガイドするため影響度で優先順位付けされています。

適用すべき場面

以下の場合にこれらのガイドラインを参照してください:

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

ルールカテゴリ (優先度順)

優先度	カテゴリ	影響度	プレフィックス
1	バンドル最適化	緊急	bundle-
2	再レンダリング防止	緊急	rerender-
3	アニメーションプロパティ	高	anim-
4	レイアウトアニメーション	高	layout-
5	スクロールアニメーション	中～高	scroll-
6	ジェスチャー最適化	中	gesture-
7	スプリング・フィジックス	中	spring-
8	SVG・パスアニメーション	低～中	svg-
9	終了アニメーション	低	exit-

クイックリファレンス

1. バンドル最適化 (緊急)

• bundle-lazy-motion - motion の代わりに LazyMotion と m コンポーネントを使用
• bundle-dynamic-features - モーション機能を動的にインポート
• bundle-dom-animation - 基本的なアニメーションに domAnimation を使用
• bundle-use-animate-mini - シンプルなケースに mini useAnimate を使用
• bundle-strict-mode - 厳密モードを有効にして誤ったインポートをキャッチ

2. 再レンダリング防止 (緊急)

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

3. アニメーションプロパティ (高)

• anim-transform-properties - transform プロパティをアニメーション
• anim-opacity-filter - ビジュアル効果に opacity と filter を優先
• anim-hardware-acceleration - ハードウェアアクセラレーションを活用
• anim-will-change - willChange prop は慎重に使用
• anim-independent-transforms - transform を独立してアニメーション
• anim-keyframes-array - シーケンスに keyframe 配列を使用

4. レイアウトアニメーション (高)

• 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 - ジェスチャー variants を子要素に流す
• gesture-drag-constraints - dragConstraints ref で境界を設定
• gesture-drag-elastic - dragElastic を設定して自然な感触を実現
• gesture-tap-cancel - 中断されたジェスチャーに onTapCancel を使用

7. スプリング・フィジックス (中)

• spring-physics-based - 中断可能性のためにフィジックスベースのスプリングを使用
• spring-damping-ratio - ダンピングを設定して振動を制御
• spring-mass-inertia - mass を調整してより重い・軽い感触に
• 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	バージョンとリファレンス情報