Framer Motion デモ
「最小のフェードイン」と「UI インタラクション・レイアウト・スクロールまで含めたゴリゴリな例」を並べて、 Framer Motion の得意分野を分かりやすく体験できるページです。
01. シンプル版（基本アニメーション）
基本のフェードイン + スライド
ページ表示時に下からふわっと出てくる、最もよく使うパターンです。 ボタンを押すと何度でもアニメーションを再生できます。
初期状態：画面外（下） / 非表示
→ 表示時に、下から上へスライドしながら、透明度 0 → 1 へ変化
02. ゴリゴリ版（インタラクション / レイアウト / スクロール）
Hover / Tap アニメーション
ホバーで拡大＆浮き上がり、クリックで押し込まれるように縮みます。 ボタンやカードのインタラクションによく使うパターンです。
カーソルを乗せたりクリックしてみてください
Hover: 少し大きく＆浮き上がり / Tap: 少し小さくなって押し込まれる
Drag（ドラッグ）アニメーション
フローティングパネルやツールチップなど、 マウスやタッチに追従する UI を作るときに使えます。
点線枠の中でカードをドラッグできます
このカードをドラッグ
Layout アニメーション（開閉）
コンテンツの開閉時に、ただの「パッ」と切り替えではなく、 なめらかに伸び縮みします。
レイアウトの変化（高さの変化など）を補間してくれるので、 FAQ やアコーディオンで特に便利です。
スクロール連動アニメーション
ページ全体のスクロール位置（0〜100%）に応じて、 進行バーと丸が大きく動きます。上から下までスクロールしてみてください。
スクロール進行度（ページ全体）0%
0%
ページの一番上にいると 0%、一番下までスクロールすると 100% になります。 進行バーの伸び具合と丸の位置・大きさが連動しているのが分かります。