アニメーションライブラリ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/
Read next
- 2021年11月20日Next.js × microCMSでカテゴリ一覧ページを作る
- 2021年11月20日ReactでスライダーライブラリのSwiperを使う