アニメーションライブラリGSAPについて

GSAP
GreenSock社が開発したアニメーションライブラリ。
個人的な肌感ではアワード系サイトに載ってるサイトのうち6,7割ぐらいは使ってるので、アニメーションするときは、とりあえず入れていいライブラリだと思います。
2019年11月にGSAP 2からGSAP 3に移行したため、web上ではGSAP2の書き方の情報が混在していて注意が必要です。
従来はTweenLite, TweenMax, TimelineLite, TimelineMaxと分割してたので、 これらが記述されてる記事はGSAP2の書き方と思っていいです。
使い方は公式や、いろんなサイトで紹介されてるので、ここではざっと概要を。

目次

• 簡単なデモとGSAPの使い所
• メリット
  • 複雑な動きの実装をスッキリかける
  • GSAPのプラグインを使うことで拡張できる
  • スクロールイベントの間引き処理がされていてパフォーマンスがいい
  • 軽量
• npm経由で使う
• ライセンス
• ドキュメントなど
• 有料プラグイン

簡単なデモ

簡単なデモを作りました。最後の動きは有料プラグインです（Codepen用にお試しで使えるコードを使ってます）

使い所としては、デモのようにスクロールして要素が表示された時に、何かアニメーションしたいとき、スクロールに応じて要素を動かしたい時、複数のアニメーションを順番に動かしたい時など。
ただ、こういった動きは自分で実装しようと思えばできるし、他にもライブラリがあるのにGSAPが多くのサイトで使われてるのは何故でしょう？

メリット

複雑な動きの実装をスッキリかける

例えば、連続的なアニメーションの実装は、GSAPのtimelineを使えば見やすく書けます。

// スクロールして.sectionの上部が、ブラウザのtopに到達したときに、
// 1. div1をy方向に200%、2秒かけて動かす
// 2. div1をy方向に100%、1秒かけて動かす
// 3. 3秒待つ
// 4. div2をy方向に-200%、2秒かけて動かす
gsap
    .timeline({
      scrollTrigger: {
        trigger: '.section'
        start: 'top top',
      }
    })
    .from('.div1', { yPercent: 200, duration: 2 })
    .to('.div1', { xPercent: 100, duration: 1 })
    .to('.div2', { duration: 3 })
    .to('.div2', { yPercent: -200, duration: 2 })

GSAPのプラグインを使うことで拡張できる

プラグインを使うことでさらにアニメーションの幅が広がります。
有料のもあるので注意

スクロールイベントの間引き処理がされていてパフォーマンスがいい

スクロールイベントを普通に書くとスクロールの度にすごい頻度でイベントが発火してしてしまいます（他にもマウスを動かした時や、リサイズ処理など）。
そのスクロールの負荷対策としてdebounce（デバウンス）処理をするのですが、これをGSAP側でやってくれてます。スクロールイベントを一定間隔で間引いてくれてます。

軽量

ファイルサイズが軽いらしいです。GSAP2よりも3はさらに半分軽くなったとか。
どれぐらい軽いかを書いてるところが見つからないので、情報得たら書きます。

npm経由で使う

CDNで使う方法はよくブログで紹介されてますが、実制作では npm installして使うと思うので書いておきます。

npm i gsap
or
yarn add gsap

importとプラグインを使う

import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger.js'

gsap.registerPlugin(ScrollTrigger)

// 複数プラグインを使う場合
// gsap.registerPlugin(MotionPathPlugin, TextPlugin);

ライセンス

GSAPはMITやGPLではなく、独自ライセンスのため注意。
無料で公開されているサイトであれば無料ですが、有料なコンテンツがある場合は有料のライセンス登録が必要です。
普通のwebサイトなら大丈夫ですが、何か課金があったり、販売するサイトはライセンス料を払う必要があります。
https://greensock.com/licensing/

ドキュメントなど

公式ドキュメントのどこ見たらいいかなどのまとめ

プラグイン一覧

https://greensock.com/products/

ドキュメント

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

フォーラム

コミュニティもあるので、何か分からなければ質問もできます。ただし英語。
https://greensock.com/forums/

Easing

easinの指定をしたいときはここで実際の動きを見れる
https://greensock.com/docs/v3/Eases

有料プラグイン

GreenSock会員になれば使える有料プラグインがあります。
プラグインをフルに使うには「Shockingly」プライン以上が必要です。
Codepenではサンプルで使えるようにしてくれてるので、有料プラグインを試したいときはCodepenを使うといいです。
https://greensock.com/club/