まずはScrollTriggerの導入方法です。
導入方法はいくつかありますが、今回は2通りの方法をご紹介します。

1. CDN
   公式サイトから、「CDN」のタブを開き「ScrollTrigger」にチェックを入れます。
   コードが出てきますので、ピンクで囲ったコードをコピーして任意の場所（</body>の手前など）に貼り付けてください。
   GSAP自体の導入もまだであれば、水色で囲ったコードも一緒に貼り付けてください。
   この時、水色のコードが上になるよう貼り付けないとエラーになりますのでご注意ください。
   
2. 直接ファイルをダウンロードする
   GitHubの、dist>ScrollTrigger.min.js をダウンロードします。
   ダウンロードしたファイルは任意の場所に設置してください。
   GSAP自体の導入もまだであれば、dist>gsap.min.js も一緒にダウンロード、設置してください。
   

では実際に、ScrollTriggerを使うとどんなことができるのかをご紹介していきます！

scrubを使うと、スクロール量に応じて要素の動き同期させることができます。
説明だけだと少しイメージしにくいので、まずは実際の動きを見てみましょう！

▼scrubを使わない例

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

▼scrubを使う例（ゆっくりスクロールしてください）

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

scrubを使わない例では、要素がスクロールとは関係なく勝手に右に移動しています。一方で、scrubを使う例では、スクロール量に合わせて要素が右に動いているのが分かります。
このように、scrubはスクロール量に応じて要素の動き同期させることができます！

scrubでパララックス（視差効果）を実装

ScrollTriggerでは、このscrubを使用してパララックス（視差効果）を簡単に実装できます。
パララックスとは背景や要素が異なる速さで動く演出のことで、立体感を感じさせることができます。

実際にパララックスを実装してみましょう！

▼コード

gsap.registerPlugin(ScrollTrigger);
gsap.to(".parallax-bg", {
  y: -150, // 背景を上に動かす
  scrollTrigger: {
    trigger: ".parallax-bg",
    start: "top bottom", // セクションが画面に入った瞬間に開始
    end: "bottom top", // セクションが画面から出るまで
    scrub: 3, // スクロール量に合わせてアニメーションを進める（値を変えると速度も変わります）
  },
});

▼実際の動き

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

スクロールすると、テキストは通常通りに動きますが、画像はゆっくり滑るように動きます。これがパララックスです！

記述方法としては、ScrollTrigger:{ }の中に、対象の要素、開始位置などと一緒に、scrub: 3,を記述します。
scrub: 3 の数値は、アニメーションがスクロールに追従する速さを指定しています。
小さいほどキビキビ動き、大きいほど滑らかに動きます。

ScrollTriggerでは、pinを使用することで、要素を固定することができます。

こちらも実際に見てみましょう！

▼コード

gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.create({
  trigger: ".js-pin-container",
  start: "top top",
  end: "bottom top",
  scrub: true,
  pin: true,
});

▼実際の動き

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

pin: true,と記述すると、トリガー要素（trigger に指定した要素）がstartの位置からendの位置まで画面に固定（ピン留め）されます。

注意として、pinで固定した要素自体に、別のアニメーションを適用すると位置がおかしくなってしまうことがあるため、しない方が良いです。固定した要素内の要素をアニメーションさせましょう。

レスポンシブ対応も実は簡単に行うことができます！
下記のコードを使用してレスポンシブできますが、pxはサイトに合わせて任意の数値を入れてください。

▼コード

ScrollTrigger.matchMedia({
  // 画面幅が960px以上の時
  "(min-width: 960px)": function () {
    // アニメーション内容
  },

  // 画面幅が600px以上、959px以下の時
  "(min-width: 600px) and (max-width: 959px)": function () {
    // アニメーション内容
  },

  // 画面幅が599px以下の時
  "(max-width: 599px)": function () {
    // アニメーション内容
  },

  // 全ての画面幅で適用するデフォルトのアニメーション
  all: function () {
    // アニメーション内容
  },
});

こちらをtrueにすると、画面サイズが変更された時に、内部的に記録されている値を全て削除してくれます。これにより、値が再計算され、正しい位置でアニメーションされるようになります。

▼コード

gsap.registerPlugin(ScrollTrigger);
const pinContainer = document.querySelector(".js-pin-container");

ScrollTrigger.create({
  trigger: pinContainer,
  start: "top top",
  end: () => "+=" + (pinContainer.offsetHeight),
  scrub: true,
  pin: true,
  pinSpacing: true,
  invalidateOnRefresh: true,
});

ここまでで紹介したscrub、pinなどを使って、「スクロールに合わせて要素を拡大、テキストをpinで固定」するアニメーションを作ってみました！

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

▼コード

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

今回は背景色を拡大させるアニメーションにしました。
ここを画像に置き換えれば、画像を眺めながらテキストをじっくり読める、よりリッチな演出になると思います。

エラーが出た時や動かない時は大体は下記が原因ですので、確認してみてください。

ファイルの読み込み順

・GSAP本体
・ScrollTrigger
・自作スクリプト
の順に読み込みを行っているかを確認してください。

記述漏れ

gsap.registerPlugin(ScrollTrigger);

ScrollTriggerのコードを記述する際は、必ず上記のコードを先に記述する必要があります。
忘れがちですが、漏れていないか確認しましょう。

ScrollTriggerを活用すれば、スクロールに連動したリッチで動きのあるアニメーションを簡単に作成できます。

ぜひ、この記事を参考にして、自分だけのオリジナル演出作りに挑戦してみてください！

【関連記事】

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

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