Step 1画面に入った瞬間に強調
タイムラインのスタート
このセクション全体を、ひとつの「流れ」を説明するタイムラインとして扱います。まずは一番上のステップからスタートです。
スクロールアニメーション デモ
スクロールに連動したアニメーションを、シンプルな「フェードイン」 と ゴリゴリな「タイムライン UI」の 2 パターンで比較できるページです。
01. シンプル版（スクロールでふわっと表示）
シンプル版スクロールアニメーション
スクロールして要素がビューポートに入ったタイミングで、 ふわっとフェードインするだけの最小構成です。
Framer Motion の whileInView と viewport オプションだけを使っています。
01. スクロールでふわっと表示
画面下から少しずつカードが立ち上がる、もっとも基本的なスクロールアニメーションです。
02. 一つずつ順番に登場
同じアニメーション設定でも、ディレイをずらすだけで“順番に出てくる感”を簡単に作れます。
03. 複雑な設定はナシ
Intersection Observer や AOS を使わず、Framer Motion の whileInView だけで完結させたシンプル版です。
02. ゴリゴリ版（タイムライン + 進行バー）
ゴリゴリ版スクロールアニメーション（タイムライン UI）
この枠の中をゆっくり下までスクロールしてみてください。左のバーがグイッと伸びていき、 それに合わせて右側のステップカードが順番に「ふわっ＆ズーム＋影」で強調されます。
左のバーは Framer Motion の useScroll と useTransform でスクロール進行度と連動させ、 ステップカードは whileInView で「画面に入った瞬間」に ガッツリ動かしています。
Step 2画面に入った瞬間に強調
バーがスクロール量に応じて伸びる
ページを下にスクロールしていくと、左の縦バーが下から上へとどんどん伸びていきます。
Step 3画面に入った瞬間に強調
今いるステップが強調される
画面に入ってきたステップカードほど、カードが大きく・明るく・影付きで表示され、「いまここ！」が直感的に分かります。
Step 4画面に入った瞬間に強調
読み進めている感の演出
単なる縦長テキストではなく、「流れに沿って進んでいる」という感覚を、ビジュアルと動きでサポートします。
記事では、「シンプル版：whileInView でフェードイン」→ 「ゴリゴリ版：useScroll でバー連動 ＋ whileInView でカード強調」 という形で、段階的な発展例として紹介できます。