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