JavaScriptのアニメーションライブラリ「GSAP」を使ってみる

GSAP2021.10.17

最終更新日：2021.10.18 Update!!

最近のウェブサイトではアニメーションを使ったものが多く、これまでの実案件においても仕様に含まれていることもありました。いつもはCSSとJavaScriptで自前で実装していたケースがほとんどでしたが、シンプルなものやちょっとしたアニメーションであれば問題ないのですが、複雑になってきたり、数やバリエーションが増えてくると、実装コストや管理が面倒になるので課題でした。そこで、過去に別の案件で触れたことがあった「GSAP」で一括して扱っていく方針を試してみることになりました。今更感はありますが、今回はそのGSAPの導入と基本についてまとめておきたいと思います。数多くあるJavaScriptのアニメーション実装のライブラリの中でもGSAP自体は有名なもので、昔は「TweenMax」として呼ばれていた記憶があります（確かではありませんが、、）当時も興味はあったのですが、スクリプトが重いという声があり、実案件で触らないといけない場合を除き、私自身もあまり積極的に活用しようと思わず今に至っていました。ただ、CSSやJavaScriptでアニメーションを自前で実装する場合、どうしてもCSS側のコードが煩雑になったり、classでバリエーションを切り分けられるようにするものの、どうしても限界はでてきてしまいます。さらに、それらが原因でコードの無駄も発生しウェブページのレンダリングのパフォーマンスにも影響してくるという悪循環に陥ってしまいます。ですので、ある程度の数やバリエーションのアニメーションが求められる場面では、このようなライブラリを活用するのが良さそうですね。それではGSAPの導入する流れについて見ていきます。まずはライブラリのソースコードをダウンロードしてプロジェクトに加えていきます。npmですと下記のコマンドでインストールができます。

$ npm install --save gsap

インストールが終わるとpackage.jsonに追加されているのがわかりますね。これでGSAPを使う準備ができました。【package.json】

{
  ......
  "dependencies": {
    "gsap": "^3.8.0",
    ......
  },
  ......
}

また、GSAPはCDNでもライブラリのスクリプトが利用できます。webpackなどの環境ではない場合にはこちらでも対応できますね。

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

基本的な実装例ですが、アニメーション要素のHTMLにclassなどを指定して、それをセレクタとしてアニメーション処理を定義していくイメージです。ライブラリのソースコードを読み込み、gsapオブジェクトに含まれるメソッドを使います。ここでは「fromTo()」メソッドを使ってアニメーションを実装していきます。このメソッドは第一引数に対象のHTML要素、第二引数に初期状態（アニメーション開始時）のスタイルをCSSのように定義し、第三引数には終了状態（アニメーション終了時）のスタイルを開始時と同じように設定します。ただし、遅延やアニメーション時間などの指定は第二引数ではなく第三引数に記述するなど細かい注意点があります。

// HTML
<div class="target">アニメーションの対象要素</div>

// JavaScript
import { gsap } from 'gsap'

gsap.fromTo(
  '.target',
  {
    opacity: 0,
    y: 30
  },
  {
    opacity: 1,
    y: 0
    duration: 2
  }
);

これだけでアニメーションが実装できてしまいます、とてもシンプルで手軽に実装することができますね。

GSAPの基本メソッドと独自プロパティの例

GSAPには様々なアニメーションが表現できるため、数多くのメソッドが用意されています。ここでは基本的なものをまとめてみました。「from()」と「to()」など少し違いがわかりにくいものもあるので注意が必要です。

gsap.from()	指定したスタイルから現在のスタイルにアニメーションさせます、通常のアニメーション変化とは逆再生のような形になります。
gsap.to()	現在のスタイルから指定したスタイルにアニメーションさせます、通常のアニメーションのイメージで使えます。
gsap.fromTo()	アニメーション開始時と終了時のスタイルを指定して、その変化をアニメーションさせます。
gsap.timeline()	それぞれ異なるアニメーションをタイムライン上で再生できるようになります。チェーンメソッドのようにアニメーションをつなげていきます。
gsap.set()	初期状態のスタイルを設定できます。アニメーションさせるための準備として使うことが多いです。

先ほどのサンプルでは、fromTo()のメソッドで開始時と終了時のスタイルを定義して使っています。この後これらのメソッドを使ったサンプルを見ていきたいと思います。そして、各メソッドの引数にはCSSのようにアニメーションで変化させるスタイルなどを定義していくのですが、基本的にはCSSのプロパティを使うことができます。ただ、「background-color」のように通常のハイフン区切りのケバブケースは使うことができませんので「backgroundColor」というようにキャメルケースに変換する必要があります。この方法ですとどうしても長くなってしまいますが、一部のプロパティは独自のショートハンドが用意されているので、できればそれを使う方がいいですね。下記に代表的なものをまとめていますのでご参考ください。

x	translateX()のショートハンド、指定した数値はpxで換算され、%などの単位は文字列として単位を含めて直接記述する
y	translateY()のショートハンド、先ほどと同じように指定した数値はpxで換算される
z	translateZ()のショートハンド、先ほどと同じように指定した数値はpxで換算される
scale	sclale()のショートハンドで、表記は変わっていないものの覚えやすい
rotation	rotate()のショートハンドで、値は同じように角度（deg）で指定する
skew	skew()のショートハンドで、scale()同様、表記は変わっていない
delay	animation-delayと同じように扱える、アニメーション開始までの遅延時間を秒数の単位で指定
duration	animation-durationと同じように扱える、アニメーションの再生時間を指定
repeat	animation-iteration-countと同じように扱える、アニメーションを繰り返す回数を指定、-1とすることで無限ループ再生となる
ease	animation-timing-functionと同じように扱える、イージングの設定を行う
keyframes	スタイルを配列で指定することで、キーフレームとしてアニメーションを設定できる
autoAlpha	opacityとvisibilityを組み合わせたような形で、表示非表示の変更に使える
yoyo	trueの指定でアニメーションを反復しながら繰り返して実行できる
onComplete	アニメーション終了時にコールバックされるアニメーションを指定

このようにいろんなプロパティが存在するので覚えたり使いこなすのは大変なのですが、それだけいろんなアニメーションの仕様に対応できるので心強いですね。

GSAPで用意されているイージングの例

GSAPにはメソッドや独自プロパティ以外にも、いろんなバリエーションのイージングが用意されています。キーワードを指定するだけで希望のイージングを実現できるので簡単に設定することができ、管理するときもわかりやすいですね。詳しくは下記の公式ドキュメントにシミュレーターと合わせて確認することができます。【Eases - GreenSock】 https://greensock.com/docs/v3/Eases 下記にイージングの時間変化の種類をまとめています。これらの種類と「in」「out」「inOut」の3タイプの組み合わせてイージングを設定していく形になります。

none	直線的な動きで一定の変化となり、linearと同じイージングになる
sine	サインカーブを描く変化となり、緩やかなイージングになる
power1〜power4	sineをより強調させた変化となり、power1〜power4の異なる変化の度合いが用意されている
back	大きく外れるようなカーブを描き、アクセントが生まれる変化になる
elastic	backをより強調させた変化となり、スピードの変化にも大きな差が生まれる
bounce	複数の細かい山型を含んだカーブを描き、小刻みにスピードが変化する
rough	ランダムなジグザグを描く線となり、スピードの変化も小刻み且つランダムになる
slow	中間部分でスローモーションになるような変化を表現できる
steps	階段状に描く線となり、コマ送りのような時間変化となる
circ	power4をより滑らかにしたカーブを描き、メリハリがありながらもスムーズに変化する
expo	circをより極端にしたカーブを描き、スピードの変化がより目立つようになる
CustomEase.create()	イージングを自由にカスタマイズできる、引数で細かい変化を指定する

これだけあれば十分事足りそうですね、stepsやslowなどは結構珍しい形になるので、工夫次第で面白いアニメーションが実現できそうですね。

GSAPを使った基本のアニメーション実装例

では具体的なアニメーション実装例を見ていきます。今回はシンプルなアニメーションで基本的な使い方となりますが、応用することでもちろん複雑なアニメーションも実現することができます。 1. 動きをつけたフェードインで表示 よくあるフェードインで表示させるアニメーションです、スクロールでのトリガーと組み合わせたい動きですね。fromTo()メソッドで、表示前と表示後のスタイルを指定します。

gsap.fromTo(
  '.example-01',
  {
    y: 60,
    autoAlpha: 0
  },
  {
    y: 0,
    autoAlpha: 1, 
    delay: 0.4,
    duration: 2,
    ease: 'power2.out'
  }
)

2. 繰り返しの反復アニメーション 繰り返しの指定をすることで、ループアニメーションも実現することができます。ファーストビューやコンバージョン要素など目立たせたい箇所に使ってみたいですね。

gsap.fromTo(
  '.example-02',
  {
    y: 40,
  },
  {
    y: 0,
    duration: 1,
    ease: 'power1.inOut',
    repeat: -1,
    yoyo: true
  }
)

3. タイムラインを使った複雑な動きのアニメーション timeline()メソッドを使うことで、異なるアニメーションを直列でつなげていくことができます。こうすることで複雑な動きや変化のアニメーションを実現することができます。記述方法もチェーンメソッドのようにシンプルに記述できますのでハードルも低いですね。ただしコードが長くなってしまいますので、独立したアニメーションとして作成し、コールバックで呼ぶようにするなどの工夫も必要ですね。

gsap.timeline()
  .fromTo('.example-03', 
    { autoAlpha: 0, scale: 0, x: 0, y: 0 },
    { autoAlpha: 1, scale: 1, x: 0, y: 0, duration: 0.8 },
  )
  .fromTo('.example-03', 
    { x: 0, rotation: 0 },
    { x: '100%', rotation: 720, duration: 1.2 },
  )
  .fromTo('.example-03', 
    { y: 0, x: '100%' },
    { y: -60, x: '100%', duration: 0.4 },
  )
  .fromTo('.example-03', 
    { y: -60, x: '100%' },
    { y: 0, x: '100%', duration: 0.2 },
  )
  .fromTo('.example-03', 
    { y: 0, x: '100%' },
    { y: 0, x: 0, ease: 'elastic.inOut', duration: 0.6 }
  )

これらのサンプルはこちらのページに用意しています。実際に動きを確認していただけるのでご参考にどうぞ。

GSAPのライセンスについて

一般的にライブラリなどはMITライセンスが多いのですが（参考記事「ウェブ制作に関係するライセンスについてのまとめ」）GSAPについては、一部異なりますので注意が必要です。基本的には無料（ソースコードには著作権表記が必要）で使えるのですが、有料の会員サイトなど、利用するのに費用が発生するサイトでの使用には有料ライセンスが必要になるので注意しましょう。【Licensing - GreenSock】 https://greensock.com/licensing/

今回はアニメーションライブラリのGSAPについて導入や基本的な使い方をまとめてみました。今回記載している内容以外にもいろんな使い方があり、応用編もまた別記事にてまとめていきたいと思いますので、ぜひ参考にしていただければと思います。