GSAPの特徴

https://greensock.com/docs/

GSAP（ジーサップ・GreenSock Animation Platform）とは、GreenSock社が開発しているアニメーションライブラリである。
GreenSock社はTweenMaxなどアニメーションに関連する多くのライブラリを作成している会社で、GSAP3からTweenMaxなどもひとつにまとめられて使いやすくなった。

GSAPを使うと簡単にハイパフォーマンスのWebアニメーションを実装できる。
GSAPの主なモジュールはトゥイーンを実現するTweenMaxとタイムライン を制御するTimelineMaxのふたつである。

アニメーションは主に演出として使用や、ユーザーの視線誘導（インタラクションデザイン）で使用されることがあるが、Awwwardsで入賞経験のあるサイトのトレンドを分析すると、90パーセント以上のサイトがアニメーションを使っていて、65パーセントサイトがGSAPを使っているという結果があるそうで、いまやアニメーションの実装は不可欠であり、その実装を長年にわたって助けているGSAPは世界でも有数の優れたライブラリである。

独自のライセンスを採用しており、無料で公開されているサイトであれば無料だが、有料なコンテンツがある場合は有料のライセンス契約が必要。

参考：https://rfs.jp/sb/javascript/03js/greensock.html

読み込み

下記のように、コアとGSAPのプラグインを読み込むようなパターンが多い。

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

イージングの種類

標準で多くのイージングが用意されている。

https://greensock.com/docs/v3/Eases

使用例

document.addEventListener('DOMContentLoaded', function() {
  var $hoge = document.querySelector('.hoge');
  var img = new Image();
  img.onload = img.onerror = function() {
    // animation start
    var startTime = 0.1;
    gsap.to('.hoge',
      {
        autoAlpha: 1,
        delay: startTime,
        duration: 0.5,
        ease: Circ.easeOut,
      }
    );
  };
  img.src = $hoge.getAttribute('src');
});