はじめに

GSAPのScrollTriggerを使ってを使って横スクロールを実装する方法を、今回はReactで検証してみたので、簡単にまとめます。

GSAPとは

GSAPとは、高性能なJavaScriptアニメーションライブラリです。

公式ドキュメント

GSAP: https://gsap.com/docs/
ScrollTrigger: https://gsap.com/docs/v3/Plugins/ScrollTrigger/

特徴

requestAnimationFrame最適化・内部補間で滑らか
タイムライン制御（順序/同期/逆再生/再利用）が可能
SVG / CSS / transform / canvas など多対象に対応
プラグイン拡張 (ScrollTrigger, Draggable, MorphSVG ほか) ができる
　検証バージョン："gsap": "^3.13.0"

ScrollTriggerって？

スクロール位置を監視し、以下を制御できるプラグインです。
スクラブ、ピン、スナップなど、スクロールに関連するあらゆるものをトリガーさせることができます。

いつ開始/終了するか (start / end)
アニメ進行度 progress (0～1)
要素をスクロール中その場に固定 (pin)
スクロールとアニメの同期 (scrub)
スナップ (snap) で特定位置に吸着

scrubオプションについて

scrub は「スクロール位置とアニメ進行をどの程度リアルタイム同期させるか」を指定するオプションです。
これを利用することでよく見かけるような、スクロールに連動した滑らかなアニメーション表現が実現できます。
今回はこれを使って、縦スクロールをすると 100vw 幅のセクション群が横にスライドし、ページは「横スクロールしている」ように見える、というものを実装してみましょう。

scrub: false (既定) … 通常再生
scrub: true … スクロール位置に即時追従（ダイレクト、機敏）
scrub: 数値 … “その秒数” で遅れて追いつく（軽い慣性）
例: scrub: 1 → 1秒程度かけて遅れて滑らかに同期。

事前準備

インストール

まずインストールしましょう。

npm i gsap

実装順序

セクションを横に並べる (flex)
ラッパーを pin してスクロール中は画面固定
総横幅 (scrollWidth) から「必要スクロール量 = 横合計幅 - 画面幅」を計算しendに設定
xPercentで配列化した各セクションをまとめて左へ移動させる
scrub + snapでスクロール体験を改善させてみる

実装例

Sample.tsx

import React, { useLayoutEffect, useRef } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import styles from "./SamplePage.module.css";

gsap.registerPlugin(ScrollTrigger);

const SamplePage: React.FC = () => {
  const wrapperRef = useRef<HTMLDivElement>(null);
  const pinRef = useRef<HTMLDivElement>(null);

  useLayoutEffect(() => {
    const wrap = wrapperRef.current;
    const pinEl = pinRef.current;
    if (!wrap || !pinEl) return;

    const sections = Array.from(wrap.children) as HTMLElement[];
    const total = sections.length - 1;

    const ctx = gsap.context(() => {
      gsap.to(sections, {
        xPercent: -100 * total,   // (枚数-1) * -100%
        ease: "none",
        scrollTrigger: {
          trigger: pinEl,
          pin: true,
          scrub: 1,                // 数値調整で滑らかさを調整する
          end: () => "+=" + (wrap.scrollWidth - window.innerWidth),
          anticipatePin: 1,
          invalidateOnRefresh: true,
        },
      });
    });

    return () => ctx.revert();
  }, []);

  return (
    <main className={styles.main}>
      <div ref={pinRef} className={styles.pinArea}>
        <div ref={wrapperRef} className={styles.horizontal}>
          <section className={styles.section}>
            <div className={styles.container}>
              <h2 className={styles.subtitle}>サブタイトル 1</h2>
              <p className={styles.text}>最初のセクションです</p>
            </div>
          </section>
          <section className={styles.section}>
            <div className={styles.container}>
              <h2 className={styles.subtitle}>サブタイトル 2</h2>
              <p className={styles.text}>2番目のセクションです</p>
            </div>
          </section>
          <section className={styles.section}>
            <div className={styles.container}>
              <h2 className={styles.subtitle}>サブタイトル 3</h2>
              <p className={styles.text}>3番目のセクションです</p>
            </div>
          </section>
        </div>
      </div>
    </main>
  );
};

export default SamplePage;

SamplePage.module.css

.main {
  overflow-x: hidden;
}

.pinArea {
  position: relative;
  height: 100vh;
  width: 100%;
}

.horizontal {
  display: flex;
  height: 100%;
}

.section {
  flex: 0 0 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.container {
  text-align: center;
  max-width: 640px;
  padding: 2rem;
}

.subtitle,
.text {
  color: #fff;
}

.subtitle {
  font-size: 2.4rem;
  margin-bottom: 1rem;
}

.text {
  font-size: 1.1rem;
  line-height: 1.6;
}

.section:nth-child(1) {
  background: #1e3a8a;
}

.section:nth-child(2) {
  background: #9333ea;
}

.section:nth-child(3) {
  background: #047857;
}

補足：プロパティについて

pin: true
スクロール中その要素を固定し、背後にダミースペーサーを確保
end: "+=" + (scrollWidth - innerWidth)
リサイズで再計算させるため関数化
xPercent
各パネル幅が 100vw 固定なので % 指定でレスポンシブ
scrub: 数値（小さいほど反応速め、大きいほどゆったりになります。まずは 0.5～1.2 あたりで試すと質感を掴みやすい）
スクロール → 進行度への追従遅延（簡易慣性）

ちなみに、snapを使うと、進行度を分割した最も近い位置に吸着させる、なんてこともできます。
（使わなければ普通の自由スクロールになる）

snap: 1 / (枚数-1)

参考：https://gsap.com/docs/v3/Plugins/ScrollTrigger/#properties

ハマりどころ

症状	原因	解決
最後まで横に行かない	end 固定/短い	end を関数 + scrollWidth 使用
途中で止まる	親に overflow:hidden でスペーサー生成不可	親(スクロールコンテキスト)の縦方向 overflow を許可
レイアウト崩れ	flex 指定抜け	.horizontal{display:flex} と .section{flex:0 0 100vw}
カクつく	画像読み込み遅延	画像に width/height 指定、scrub 数値調整

おわりに

今回はやっていませんが、他にもいろいろとできちゃえるので、興味のある方は下記の公式デモを参考に、使ってみたいものを実装してみるとよいかと思います。

Demos: https://gsap.com/demos

それでは、また。

HTNCode