GSAPを使ってウェブページのアニメーションをかんたん実装！

GSAP（ジーサップ）はウェブページのアニメーションをかんたんに実装できるJavScriptのライブラリです。

すでに有名で一般的に使われているため、今この記事を書いている時点で今更感は否めないのですが、普段は地味に@keyframesやtransitionを用いたCSS3のアニメーションでアニメーションを実装することが多いため、正直自分にはそこまで必要ないかなと考えていました。でも実際にGSAPを試してみると、コードの記述方法が簡潔になるだけでなく、JSと連動しなければいけない動きもプロパティ1つで実装できてしまいました。備忘録として使い方をメモします。このページには実際の動作サンプルがなくてごめんなさい…

GSAP本体をインストール

GSAPの公式サイトからnpmやCDNで本体のJSを読み込みます。※執筆時点のバージョンは3.12.5です。

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>

基本型 to / from / fromTo / set

gsapの後にメソッドを記述し、第1引数に動かす対象のクラス名やID名、第2引数に何秒かけて（省略可）、プロパティにどうするかを記述するのが基本型となります。

gsap.メソッド('何を', 何秒かけて, {
　〜どうするか〜
})

例えばtoはアニメーションの最後を設定するメソッドで、.hogeを1秒かけてx軸方向に100px、y軸方向に100pxへ斜め移動させるには次のように記述をします。xやyの場合は単位は省略可能で、単位を付ける場合はx:’100px’のような感じになります。

gsap.to('.hoge', 1, {
　x:100,
　y:100,
})

fromのメソッドは少し語弊があるかもしれませんが、アニメーションを最初に戻すようなときに使います。setは動かす対象の初期値をセットするためのものですが、JSの読み込み時のラグを解消するために、あらかじめ変数にしておくと便利です。fromToはその名の通り、最初と最後を同時に指定するメソッドで、例えば.hogeを1秒かけてx軸方向に0pxから100px、y軸方向に0pxから100pxへ斜め移動させます。

  gsap.fromTo('.hoge', 1,
    {
      x:0,
      y:0,
    },
    {
      x:100,
      y:100,
    },
  )

他にもopacity（透明度）、scale（拡大・縮小）、rotate（回転）、skew（歪み）などを使ってアニメーションをすることができます。transformを使ったCSSアニメーションの経験がある方は理解が早いと思います。もちろんcolorのような変化させられる一般的なCSSでもOK。ただしプロパティの表記はキャメルケース（background-color → backgroundColor）になるので注意。

gsap.to('.hoge', 1, {
　x:100,
　y:100,
　opacity:0.5, //透明度50%
　scale:1.2, //1.2倍に拡大する
　rotate:180, //180度回転させる
　skew:15, //15度歪ませる
})

他にも便利なプロパティ

他にもease（イージング）やrepeat（リピート）、delay（遅延）、duration（時間）など便利なプロパティが用意されています。ease（イージング）は様々なものが用意されていて自作も可能。duration（時間）は前述の通り、第2引数でも指定できますが、プロパティ側でも指定できます。こちらもtransitionを使ったCSSアニメーションの経験がある方は理解が早いと思います。

GSAPの変わり種として、staggerは時間差でずらして表示されることができます。複数あるカードレイアウトで順番に表示させたいときに便利ですね。yoyoはヨーヨーのように行ったり来たりの反復動作をすることができます。最後にautoAlphaは透明度だけでなくCSSのvisibility:hiddenも同時適用してくれる便利なプロパティで、オブジェクトの存在を完全に消したいときに使えます。

gsap.to('.hoge', {
　x:100,
　y:100,
　ease:'bounce.out' //イージング
　repeat:-1, //リピート回数。-1で無限
　delay:2, //2秒後にアニメーション
　duration:5, //5秒かけてアニメーション
　stagger:0.5, //0.5秒の時間差で処理
　yoyo:true, //反復動作
　autoAlpha:0, //visiblity: hidden;も同時適用
})

スクロール連動でアニメーションさせるScrollTrigger

スクロールに連動させてオブジェクトをアニメーションさせたい場合は、GSAPの公式サイトから追加でプラグインとしてJSを読み込みます。

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>

合わせて以下の記述を行いプラグインを登録します。1回だけでOKです。

gsap.registerPlugin(ScrollTrigger);

アニメーションの基本型はこれまでと同じすが、scrollTriggerのプロパティにてスクロール連動の詳細を設定していきます。まずはtriggerで動かす対象物のクラス名やID名を設定します。scrubをtrueにすると、スクロール量に応じてアニメーションをさせることができます。pinはposition:fixed;で固定させながらアニメーションをすることができます。

startではどのタイミングで実行させるかを設定します。center centerだと対象物の中心(center)が、画面の中心(center)と交差したタイミングで実行されます。endはアニメーションを終わらせるタイミングを設定できます。

gsap.to('.hoge', {
  opacity:0,
  scale: 2,
  scrollTrigger: {
	trigger:'.hoge', //何を
 	start:'center center', //どの位置で
	scrub:true, //スクロールしながらアニメーションさせる
	pin:true, //スクロールしながらアニメーションを固定表示させる (position:fixed)
	markers:true,  //便利なマーカーを表示させる
  }
});

makersのプロパティをtrueにすると、このような感じでマーカーが表示され、デバッグが用意になります。便利すぎますね。