Framer Motion モーフィングカード｜React アニメーション作例

このインタラクティブなカードレイアウトは、ReactにおけるFramer Motionの強力なアニメーション機能を実演しています。実装では3つの主要な機能を紹介しています：

1. レイアウトアニメーション：カードをクリックすると、Framer Motionがlayoutプロップを使用して、グリッドから単一カラムレイアウトへの変更を自動的にアニメーション化します。手動のアニメーション定義は不要で、ライブラリが位置とサイズの遷移を自動的に処理します。

2. 共有要素トランジション：layoutIdプロップは、カード状態間のスムーズなモーフィング効果を作成します。カードの背景、タイトル、アイコンが展開/縮小時に視覚的な連続性を維持していることに注目してください。

3. スプリング物理演算：すべてのアニメーションは、自然で弾力のある動きのためにスプリング物理演算を使用しています。whileHoverプロップはインタラクティブなスケール効果を追加し、AnimatePresenceは説明テキストの表示/非表示アニメーションを処理します。

この実装は完全にレスポンシブで、Framer Motionが宣言型APIで複雑なアニメーションワークフローをどのように簡素化するかを示しています。