【GSAP】スクロールトリガーで要素の色を変更する方法

GSAP（ジーサップ）と読むということを最近知りました。（ジーサプ？ジーサップ？といつも悩んでいました）

このGSAP。まだまだ僕自身使いこなすほど使い倒せていないのですが、色々と使う場面も増えてきたので自分の学習がてら色々と記事に残せていければと思います。

今回は第一弾として拡張プラグインの「ScrollTrigger」についてです。

そもそもあなた拡張プラグインだったんですね

今までスクロール系のアニメーションについては基本的に自分でコードを書いてしまうことが多かったので、GSAPの存在自体最近の案件で知りました。

ScrollTriggerが使われていたのでGSAP=ScrollTriggerという認識になっていたのですが、今回の記事を書くときに少し調べていたらScrollTriggerはGSAPの拡張プラグインで、GSAP自体はもっとたくさんいろんなことができる超便利な親分ってことがわかりました。

これだからフロントエンジニアは常にアンテナ張ってないといけないし、だからこそこの技術ブログは誰よりも自分のためになるって実感します。

んでScrollTriggerってなんなん？

って話ですが、超簡単にいうとScrollTriggerを使うことで特定の要素が画面に入った時に、その要素（もしくは別の要素）にアニメーションをつけることが簡単になるってものです。

スクロールに合わせて各セクションをフェードインさせるときなどによく使います。

同じようなもので「Intersection Observer」というものがありますが、こちらは特定の要素が画面の中に入った時に作動するもので、基本的にはその要素に対して操作をするのでScrollTriggerの方が柔軟にいろんな箇所に使えると思います。

個人的にはjsが少し苦手で、ScrollTriggerの方が直感的にコードを書くことができるので使いやすいです。

ただ、あまり多用しすぎるとコードの書き方が下手くそなのか少し動作が安定しないことがあるので、あまり多用しすぎないようにすることと、場合によってIntersection Observerの方を使うようにしています。

ScrollTriggerの基本的な使い方

例にならってCDNで読み込んで使う方法をご紹介します。（npmでインストールできる人なら普通に使えるでしょ？って思ってます。笑）

まずは使うものをCDNで読み込み

最初にお話しした通りScrollTriggerはGSAPの拡張プラグインなので、ScrollTriggerを使う場合はGSAPとScrollTriggerの両方を読み込む必要があります。

ScrollTrigger以外のプラグインを使う場合はそれらも別々に読み込みます。

CDN読み込みのために使うコードは公式サイトで必要なプラグインを選択すると自動で作成できるので、試してみてください。

今回使うCDN読み込みのためのコードは下記のものです。公式サイトに行くのも面倒だって方はご参考に。

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>

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

WordPressを使う人であればheader.phpもしくはfotter.phpで読み込むかwp_header()やwp_footer()にフックして読み込みましょう。

スクロールで色を変えてみる

さてさて、ここからが本題。スクロールによるアニメーションの実装をしていこうと思います。

今回はすごく簡単なもので「色を変える」というもの。

まずは完成形をご覧ください↓

スクロールをすると画面の真ん中を過ぎたあたりで文字の色が黒から赤に変わります。

逆にスクロールすると、今度は真ん中を過ぎたあたりで赤から黒に文字色が戻るのがわかると思います。

これを生のjsで実装しようと思うと、画面サイズを取得して、要素の位置を取得して、スクロールを取得して、それぞれを何だかんだ比較して・・・。みたいな面倒な処理が必要ですが、gsapとscrollTriggerを使えば下記の記述だけで済みます。

const ele = '.change-ttl';
gsap.to(ele,{
  color: 'red',
  scrollTrigger: {
    trigger: ele,
    start: 'top center',
    end: 'top center',
    markers: true, // これはマーカ表示なので公開環境では不要
    toggleActions: 'play none reverse none'
  }
})

それぞれ簡単に説明していきます。

1行目のconst el = '.change-ttl'は色を変更する要素（ターゲット要素）を定数に入れています。必ずしも定数に入れる必要はなく、jsのelementを取得する時のようなdocument.querySelector('')などの記述も必要ありません。

2行目のgsap.to(ele,{はgsapの処理を始める記述と、アニメーションを設定する要素（ele）を指定しています。定数を利用しない場合は、ここのeleの部分に直接 '.change-ttl'と記述してください。

.toの部分はこれから変えるよって意味で、cssで設定した内容を元にこの後のオブジェクト内で指定した内容に変更するということになります。ほかにも.from（.toの逆でcssで設定した内容に変更する）や.fromTo（変更前、変更後をオブジェクトで両方指定する）などがあります。

{はオブジェクトによる値の指定が始まることを意味しています。（とりあえずは呪文だと思って覚えてOK）

3行目のcolor: 'red',の部分はどのようなアニメーションを実装するのかを指定しています。今回はテキストの色を変更するだけ。例えば透明度を変更したいのであればopacity: 0,などを追加します。

今回はscrollTriggerの使い方としてご説明していますが、scrollTriggerがなくてもこの3行目の指定は可能（gsap単体で使うこともできる）です。Loadingのアニメーションなどの場合はscrollTiggerを使わずにgsap単体でアニメーション指定することが多いですね。（Timeline機能を利用する）

4~10行目にはscrollTriggerの設定内容が入っています。行数が多いので下記に抜き出した部分にコメントを入れておきます。

scrollTrigger: {
  trigger: ele, // scrollTriggerでトリガー（監視する）要素を指定
  start: 'top center', // targetで指定した要素がどこの位置に来たらアニメーションを実行するのか（要素のtopが画面のcenterに来たときに開始）
  end: 'top center', // targetで指定した要素がどこの位置に来たらアニメーションを終了するのか（要素のtopが画面のcenterに来たときに終了）
  markers: true, // マーカーを表示する設定（start,endの位置が分かりやすくなります）
  toggleActions: 'play none reverse none' // なくてもOK、スクロールを逆にした時の設定などがしたい場合に使用
}

end: 'top center',の部分は実行するアニメーションによっては設定しても意味がないことがあります。toggleActionsで逆スクロール時のアニメーションを設定する場合、scrub（今回は省いています）を使ってスクロール量によってアニメーションの実行速度を変更する場合に有効です。

最初はどこでアニメーションが実行されるのか理解するのが難しいので、慣れるまではmarkers: trueを設定して、実行される位置を目視で確認すると分かりやすいです。

実務でよく使うパターン

gsapのscrollTriggerを実務で使うとき、一番多いのは「inview」的な使い方だと思います。

スクロールして要素が画面に入った時にフェードインするような動きです。inviewの作り方はgsap以外にも生のjsで実装する、Intersection Observer APIを利用する、jQueryを利用する、alpine.jsを利用する・・・などなど。

gsapを使って全ての要素をinviewとして実装すると少し不具合が出ることも多いような感触があるので、基本はIntersection Observer APIを使うのが理想だと思います。

が、部分的なinviewの実装であればgsapが優秀。

少し工夫すれば目次とsectionを連携したものも使えるので便利です。

今回はsection要素（.section）をスクロールに合わせてinviewする実装サンプルコードを置いておきますので、ご自由に活用してください！

少しでも分かりやすいようにmarkers:trueを指定しているので、どこで要素がアクティブになるのかが直感的にわかると思います。

inviewのようなたくさんの要素に汎用的に使う必要がある場合、要素の取得とgsapの使い方に少し注意が必要です。

.sectionが単体であれば下記の記述でOK

const sectionAllay = document.querySelector('.section');

gsap.to(ele,{
  opacity: 1,
  y: 0,
  scrollTrigger: {
    trigger: ele,
    start: 'top center',
    end: 'bottom center',
    markers: true
  }
})

要素が複数ある場合は、selectorをAllで取得して、さらにgsapに対してループ処理を行う必要があるので下記のような記述になります。

const sectionAllay = document.querySelectorAll('.section');

sectionAllay.forEach((ele,key)=>{
  gsap.to(ele,{
    opacity: 1,
    y: 0,
    scrollTrigger: {
      trigger: ele,
      start: 'top center',
      end: 'bottom center',
      markers: true
    }
  })
})

このような記述の仕方であれば、iniviewをしたい要素に対して「section」というクラスをつければOKです。

実務では「section」というクラスだと分かりにくいので「js-inview」など、jsで使用するクラスでinviewを実行するとわかるようなクラス名をつけるようにしてください。（プロジェクトの要件に合わせて変更してください）

まとめ

今回はgsapの中でも個人的に最も利用頻度の高いscrollTriggerの使い方について、導入編として簡単な使い方をご紹介しました。

CDNを使うことで誰でも簡単に導入できるgsapとscrollTriggerですが、きちんと勉強することでとても強力なアニメーションを実装することができます。

CDN利用できるということは開発環境が限られている場面でも使えるので、makeshopなどのECサイト構築の場面でも役立ちます。

scrubの機能やローディングアニメーションに便利なtimeline機能など、ご紹介したい機能はたくさんあるのでぼちぼち更新していきます！