🎉 Reactでスクロールアニメーション作ってみた

Framer Motion で“動く”ページを簡単に

Webページをスクロールした時に、

• ふわっと出てくるカード

• スーッと伸びるライン

• ステップごとに強調される説明

こんな“気持ちいい動き”、見たことありますよね。

React でも、Framer Motion を使えばめちゃ簡単に作れます。

この記事では、

• シンプルなスクロールアニメーション

• ゴリゴリのタイムライン演出

この2つを紹介します！

🚀 まずはデモを触ってみよう

動きを見るのが一番早いです👇

デモ（Vercel）
https://react-animation-showcase-orcin.vercel.app

GitHub ソースコード
https://github.com/Kazuya-Sakashita/react-animation-showcase

✨ スクロールアニメーションって何が良いの？

• 読みやすい

• コンテンツが自然に入ってくる

• “ちゃんと作られた感”が出る

• LPやサービス紹介ページと相性抜群

ただ文章を並べただけのページより、読み進めたくなるUIになります。

🎨 1. シンプル版：スクロールで“ふわっと表示”

Framer Motion の whileInView を使うと、
めちゃ簡単に「スクロールして見えたらアニメーション」が作れます。

<motion.div
  initial={{ opacity: 0, y: 20 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, amount: 0.4 }}
  transition={{ duration: 0.6, ease: "easeOut" }}
>
  シンプル版｜スクロールでふわっと出てくるよ
</motion.div>

これだけで完成！

• 最初は透明＋少し下に

• 見えた瞬間ふわっと登場

• once で1回のみ再生

ページに気持ち良い動きを追加できます。

🔥 2. ゴリゴリ版：タイムラインUI（進行バー + Stepカード）

デモでも使っている「タイムライン式」の派手なスクロールアニメーション。

• 左に進行バー（スクロール量で伸びる）

• 右に Step カード（順番にアニメーション）

2-1. バーを伸ばす（useScroll + useTransform）

const { scrollYProgress } = useScroll();
const height = useTransform(scrollYProgress, [0, 1], ["0%", "100%"]);

<motion.div
  style={{ height }}
  className="w-[4px] bg-blue-500 rounded-full fixed left-6 top-20"
/>

スクロール位置を0→1で受け取って、
そのまま高さに変換するだけのシンプルな仕組みです。

2-2. Stepカード：順番に出てくるアニメーション

<motion.div
  initial={{ opacity: 0, scale: 0.9, x: 20 }}
  whileInView={{ opacity: 1, scale: 1, x: 0 }}
  transition={{ duration: 0.6, ease: "easeOut" }}
  viewport={{ once: false, amount: 0.5 }}
  className="p-6 bg-white rounded-lg shadow-md"
>
  <h3 className="font-bold">Step 1</h3>
  <p className="text-slate-600">こんな感じで出てきます。</p>
</motion.div>

• フェードイン

• 拡大

• スライド

これらを全部まとめてやってくれるので、
「順番に読ませる UI」がめちゃ簡単。

🛠 よくあるつまずきポイント

① whileInView が発火しない

• 親が overflow: hidden

• 親に transform がかかっている

• amount が小さすぎる

② useScroll が動かない

• 監視対象が違う

• fixed要素に height を style で渡していない

この記事のデモはこの辺り全部クリアしてます。

📚 参考リンク

• Framer Motion：useScroll
  https://www.framer.com/motion/use-scroll/

• Framer Motion：scroll animations
  https://www.framer.com/motion/scroll-animations/

• Intersection Observer (基礎知識)
  https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

📦 デモ & ソース

デモ
https://react-animation-showcase-orcin.vercel.app/scroll

GitHub リポジトリ
https://github.com/Kazuya-Sakashita/react-animation-showcase

📝 まとめ

• スクロールアニメーションは“読みやすくて気持ち良い”ページを作れる

• Framer Motion なら、初級者でもすぐ実装できる

• ふわっと表示 → タイムライン演出まで作れる

• デモは全て公開しているので自由に触ってください👇

https://react-animation-showcase-orcin.vercel.app/scroll