スクロールアニメーションが簡単にできる「GSAP」

コーディング

今回は誰でも簡単に実装が可能なアニメーションライブラリ「GSAP」をご紹介します。

GSAPとは？
GSAPの使い方

GSAPとは？

GSAPとは、アニメーションを実装するために特化した無料のjavascriptのライブラリです。
近年、動きのあるリッチなサイトが数多く見られる中、非常に役立つライブラリですね。

ここで一点注意点として、GSAPにはライセンスが2種類あります。

1つは「Standard License」。
もう1つが「Business License」です。

このGSAP、特定の場合には「Business License」が必要となり有料となります。
簡単に説明すると月々一定の金額を払う「課金要素（サブスクリプション）のあるサイト」の場合ですね。
例えばNETFLIXなどがそうですね。

通常のwebサイトであれば「Standard License」で利用可能なようです。
https://greensock.com/licensing/
詳しくは公式サイトでご確認ください。

GSAPの使い方

今回はスクロールアニメーションに特化してご紹介をさせていただきます。

ScrollTrigger.jsを読み込む

GSAP本体とScrollTrigger.jsの２つを読み込みます。CDNから読む込む場合は以下を書きます。

<script src=”//cdn.jsdelivr.net/npm/gsap@3.7.0/dist/gsap.min.js”></script> <script src=”//cdn.jsdelivr.net/npm/gsap@3.7.0/dist/ScrollTrigger.min.js”></script>

基本的な書き方

HTML

<section class="gsap_sec">
　　<div class="gsap-trigger">
　　  <!― ここに動かしたい要素 ― >
 </div>
</section>

JS

gsap.to('.gsap_sec', { //アニメーションしたい要素を指定
 x: 800, //横に800px動かす
 scrollTrigger: {
  trigger: '.gsap_trigger',//アニメーションが始まるトリガーとなる要素
  start: 'top center', //アニメーションが始まる位置を指定
 }
});

クラス名gsap_trigger要素のトップが、ブラウザの中央部分と重なると、
クラス名gsap_sec要素が右に800px動く、、という内容です。

アニメーション前の状態を指定したい場合

例えば透過した状態からアニメーションさせたい場合など、
特定の状態からアニメーションさせたい場合は以下のように書きます。

JS

gsap.set('.gsap_sec', {autoAlpha: 0});
//初期状態としてopacity: 0;とvisibility: hidden;が指定される
gsap.to('.gsap_sec', { 
  autoAlpha: 1, //opacity: 1;とvisibility：visible;がつく
  scrollTrigger: {
    trigger: '.gsap_trigger',
    start: 'top center'
  }
});

スクロールに合わせて、アニメーションを進める

JS

gsap.to('.gsap_sec', {
  x: 800,
  scrollTrigger: {
    trigger: '.gsap_trigger',//アニメーションが始まるトリガーとなる要素
    start: 'top center', //アニメーションが始まる位置
    end: 'bottom center', //アニメーションが終わる位置
    scrub: true, //スクロール量に合わせてアニメーションが進む（数字も指定できる）
  }
});

指定できるアニメーション

ほとんどのCSSをアニメーションで指摘できます。以下は例です。

gsap.to('.gsap_sec', { 
  autoAlpha: 1, //opacity: 1;とvisibility：visible;がつく
  x: 100, //右に100px移動。-100で左に100px移動。
  y: 200, //下に200px以上。-200で上に200px移動。
  scale:2, //２倍にする。scaleXとscaleYも指摘できる
  rotation: -30, //回転。rotationXとrotationYも指定できる
  skewX: "30deg", //変形 skewYも使える。skewは使えない。 
  delay: 2, //２秒後にアニメーションさせる
  duration: 5, //５秒後かけてアニメーションさせる
  backgroundColor: "red", //背景色を赤にする
  …
});

以上、簡単ではありますが、GSAPのスクロールアニメーションの使い方でした。