web

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

公開日:2021年10月31日
最終更新日:2021年11月21日

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

目次

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


簡単なデモ

簡単なデモを作りました。最後の動きは有料プラグインです(Codepen用にお試しで使えるコードを使ってます)
https://codepen.io/mismith0227/full/JjyEdEZ
使い所としては、デモのようにスクロールして要素が表示された時に、何かアニメーションしたいとき、スクロールに応じて要素を動かしたい時、複数のアニメーションを順番に動かしたい時など。
ただ、こういった動きは自分で実装しようと思えばできるし、他にもライブラリがあるのに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/

About the author

大阪でフロントエンドエンジニアをしています。写真を撮るのが趣味です。よかったら500pxに載せてる写真も見てください。
web上に公開しているので、正確さに可能な限り努力してますが、個人の備忘録程度に書いてるので、ご自身の判断で参考程度に読んでください。
間違いやご意見があれば、コンタクトやSNSに気軽にご連絡ください。

Read next

Category

  • web
  • 雑記