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

公開: 2025年11月22日

Tips

学習振り返り

要約

Framer Motionを使って、Reactで簡単にスクロールアニメーションを実装する方法を解説。
シンプルな「ふわっと表示」と派手な「タイムラインUI」を作成する2つのアプローチを紹介。
デモとソースコードが公開されているため、誰でもすぐに試せる。

音声で記事を再生

0:00

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>