今回作るページの全体構成は以下の通りです。スクロールに応じて要素が動くアニメーションを活用し、そのまま実際のLPでも使える動きにしました。

1. ヒーローセクション
   タイトルとボタンが段階的にフェードアップ。矢印が上下にゆっくり動く。

2. セクション1
   テキストとカードが順番にフェードアップで登場。

3. セクション2（パララックス）
   スクロールに合わせて背景がゆっくり拡大、テキストが手前で浮かぶように表示。

4. セクション3（ピン留め）
   スクロールに合わせてピン固定。テキストが段階的に表示され、最後に全体がフェードアウト。

今回はGSAPプラグインの「ScrollTrigger」も使用します。
ScrollTriggerについての詳しい説明は別の記事でおこなっておりますので、「ScrollTriggerってなに？」という方は、下記を参考になさってください。

▼ScrollTriggerについて
https://docodoor.co.jp/staffblog/gsap-scrolltrigger/

まずは完成版をお見せします。
背景が単色なので地味に見えるかもしれませんが、動きとしては実践で使えるものを作っています。

See the Pen
【GSAP】LP by ishi (@qwwbetnz-the-typescripter)
on CodePen.

ヒーローセクションでは、timeline機能を使って、タイトルとボタンを順番にフェードアップさせています。
また、上下にゆっくり動く矢印はスクロールを促す目印として使用し、ユーザーが自然に次のセクションへ目を向けられるよう演出しています。

See the Pen
【GSAP】LP_HERO by ishi (@qwwbetnz-the-typescripter)
on CodePen.

セクション1では、テキストとカード型コンテンツを順番に表示させています。
staggerを使うことで要素が一気に表示されるのではなく、少しずつ現れるため楽しさと読みやすさがあります。

See the Pen
【GSAP】LP_Section1 by ishi (@qwwbetnz-the-typescripter)
on CodePen.

このセクションでは、スクロールに合わせて背景画像がゆっくりと拡大し、テキストが手前で浮かび上がるように表示されます。
動き自体はシンプルですが、静止画にも奥行きが生まれ立体的な印象になります。

なお、背景の動きをスムーズに制御しているのがscrollTrggerのscrubオプションです。
scrubを使うと、スクロール度合いとアニメーションを同期させることができます。

See the Pen
【GSAP】LP_Section2 by ishi (@qwwbetnz-the-typescripter)
on CodePen.

セクション3では、セクション全体をピン固定し、スクロールに合わせてテキストを段階的に表示します。
ゆるやかなテンポで展開することで、カフェの「穏やかな時間」を感じさせる演出にもなっています。

See the Pen
【GSAP】LP_Section3 by ishi (@qwwbetnz-the-typescripter)
on CodePen.

ここまでのヒーローセクションからセクション3までを合わせると、最初にお見せした完成版になります。

セクションごとにアニメーションの種類を変えることで、ページ全体にメリハリが生まれます。
スクロールするたびに少しずつ動きや変化があるので、見ている人は自然に次のコンテンツへ目を向けたくなり、飽きずに楽しむことができます。

今回の記事では、LPで使えるアニメーションを作ってみました。

ページ全体を通してテキストや背景が段階的に現れたり、奥行き感のある動きを見せたりすることで、ただ読むだけのページではなく、「見て楽しい」「体験できる」ページに仕上がっています。

スクロールに連動して動くアニメーションは、情報を自然に整理したり、視線を誘導したりする効果もあります。こうした動きを取り入れることで普通のLPも一気に印象的でリッチな体験に変えることができます。

気になった方は、ぜひ自分のサイトやLPでもGSAPアニメーションを試してみてください！

【関連記事】

▼GSAPの導入方法や、アニメーションの作り方を知りたい方はこちら
GSAP入門編｜アニメーションの作り方を解説

▼GSAPの基礎や特徴、事例を知りたい方はこちら
GSAPの基礎と特徴を徹底解説｜事例から学ぶ活用法