
[GSAP](https://greensock.com/gsap/) の [ScrollTrigger](https://greensock.com/scrolltrigger/) はスクロールに応じたアニメーションを作成できます。

## ScrollTrigger とは

- アニメーションを設定した要素が viewport（ビューポート）にある場合のみ再生されます。
- GSAP のアニメーションと組み合わせて豊富なアニメーションを作成できます
- 縦・横どちらのスクロールにも対応しています
- ウィンドウサイズが変更されると自動的に再計算されます
- アニメーションの実行タイミングの指定が柔軟

そのほかの主な特徴は[公式ドキュメント](https://greensock.com/docs/v3/Plugins/ScrollTrigger)でご確認ください。

## インストール

公式サイトの [GSAP Installation](https://greensock.com/docs/v3/Installation) ではダウンロードやCDN、npm などの導入方法が紹介されています。

### CDN

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
```

### npm

```bash
npm install gsap
```

```js
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);
```

## 例1. シンプルなアニメーション

公式サイトの例を参考にシンプルなフェードインアニメーションを作成しました。  
[デモ（CodePen）](https://codepen.io/chocolat5/pen/OJwqMJv)

テキストと画像が GSAP の `fromTo` でフェードインしながら下から上/右から左へ移動するアニメーションがスクロールに応じて一度だけ実行されます。

```js
gsap.fromTo(
  ".image",
  {
    x: 50,
    opacity: 0,
  },
  {
    scrollTrigger: {
      trigger: ".box",
      start: "top center",
    },
    x: 0,
    opacity: 1,
  }
);

gsap.fromTo(
  ".text",
  {
    y: 50,
    opacity: 0,
  },
  {
    scrollTrigger: {
      trigger: ".box",
      start: "top center",
    },
    y: 0,
    opacity: 1,
  }
);
```

ScrollTrigger のオプションについて

- `trigger` : 指定した要素が viewport に入ったときにアニメーションが発火
- `start` : `trigger` の要素のどの部分が viewport のどの位置に達した際にアニメーションを発火させるかを指定

デモでは `trigger` の上部（ `top` ）が viewport の中央（ `center` ）に達した際にアニメーションが発火します。

```js
scrollTrigger: {
  trigger: ".box",
  start: "top center",
},
```

ScrollTrigger のオプションで `markers: true` にすると画面右端にアニメーションの開始・終了位置が表示されます。

![](./scroll-trigger-simple-sample.gif)

`scrub: true` を指定するとアニメーションの進行状況がスクロールバーにリンクされ、アニメーションがスクロールバーに連動するようになります。 `scrub: 0.5` など数字を指定した場合は、アニメーションがスクロールバーに0.5秒かけて追いつきます。

## 例2. ページのスクロール量を表すプログレスバー（Reading Progress Bar）

ブログの記事などページのスクロール量を表すプログレスバーです。  
[デモ（CodePen）](https://codepen.io/chocolat5/pen/MWBxqZa)

プログレスバー表示用の `div` を用意します。あとでアニメーションの発火トリガーに設定したいので、記事本文を囲むタグに任意の class 名を指定します。

```html
<div class="progress"></div>
<article class="article">記事本文</article>
```

css では記事の最後に到達したときの状態を設定します。また、スクロール後も画面上にプログレスバーを常時表示したいので、 `position: sticky;` でページ上部に固定します。

```scss
.progress {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 12px;
  background-color: #8bd3dd;
}
```

GSAP でアニメーション開始時の状態を設定します。

```js
gsap.from(".progress", {
  // アニメーションさせる要素
  scaleX: 0, // width: 0 から変化する
  transformOrigin: "left center", // プログレスバーが画面左から右へ変化する
  ease: "none",
});
```

上記に ScrollTrigger の設定を追加します。アニメーションの発火トリガーとなる要素は `.article` です。アニメーションは `.article` の上部が viewport の 72px に達したときに開始され、 `.article` の最下部が viewport の最下部に到達したときにアニメーションが終了します。

```js
gsap.from(".progress", {
  scrollTrigger: {
    trigger: ".article",
    scrub: true,
    start: "top 72px", // アニメーション開始位置
    end: "bottom bottom", // アニメーション終了位置
  },
  scaleX: 0,
  transformOrigin: "left center",
  ease: "none",
});
```

全コードはデモページでご確認ください。  
[デモ（CodePen）](https://codepen.io/chocolat5/pen/MWBxqZa)

## 例3. スクロールに応じて背景色を変化

スクロールに応じて `background-color` を変化させます。  
[デモ（CodePen）](https://codepen.io/chocolat5/pen/GRBezbg)

css で変化後の背景色を指定します。

```scss
.change {
  background-color: #8bd3dd;
}
```

GSAP でアニメーション開始時の状態や効果などを設定します。

```js
gsap.from(".change", {
  // アニメーションさせる要素
  duration: 0.5, // 0.5秒かけて変化させる
  backgroundColor: "#fef6e4", // 変化前の背景色
  ease: "none",
});
```

上記に ScrollTrigger の設定を追加します。アニメーションの発火トリガーとなる要素はアニメーションを付与する要素と同じ `.change` です。背景色を変化させるセクションの中ほどあたりまでスクロールした際にアニメーションを開始して、スクロールがセクションの最後に達したときにアニメーションが終了するようにしています。

```js
gsap.from(".change", {
  scrollTrigger: {
    trigger: ".change",
    start: "center center",
    end: "bottom bottom",
    scrub: true,
  },
  duration: 0.5,
  backgroundColor: "#fef6e4",
  ease: "none",
});
```

全コードはデモページでご確認ください。  
[デモ（CodePen）](https://codepen.io/chocolat5/pen/GRBezbg)

## 例4. 画像やテキストが切り替わるアニメーション

GSAP の Timeline を利用した連続のアニメーションの例です。

[デモ（CodePen）](https://codepen.io/chocolat5/pen/eYjZeRJ)

## 参照

- GreenSock | Docs | Plugins | ScrollTrigger [https://greensock.com/docs/v3/Plugins/ScrollTrigger](https://greensock.com/docs/v3/Plugins/ScrollTrigger)（2023-2-5参照）


GSAP ScrollTrigger で作るスクロールアニメーション

Tags