昨今のWeb制作において、アニメーションの実装は欠かせないものになっています。
その目的は、ユーザーの視線誘導やブランディング、機能的なアニメーション（UIアニメーション）など様々ですが、アニメーションを作れば作るほど実装コストも上がってきます。
そんな時に使うのが「ライブラリ」や「フレームワーク」、「プラグイン」などです。
ライブラリで有名なものだと、「jQuery」はJavaScriptのライブラリであり、Web制作で記述するコード量の削減が狙えたりします。
今回はJavaScriptでアニメーションを作る上で多くの現場で愛用されている「GSAP」（ジーサップ）について解説していきます。
GSAPとは
GSAPを一言で表すと「Web制作・開発においてモダンなアニメーションを作成するためのJavaScriptライブラリ」です。
このライブラリは、Web制作で多くのサイトに用いられている技術で、モダン（現代的）なデザインに用いられるアニメーションを、直感的に見やすいコードで書くことができます。さらに、処理が最適化されているので、Webサイトの動作も重くなりずらいという素晴らしいライブラリとなっています。
GSAPの使い方
そんな素晴らしいものを使わない手はないので、早速使い方についての説明に入ろうと思います。
GSAPを使う上で、基本であり恩恵を最大化するのに必要なものとして「Tween」と「Timeline」というものがあります。
以下では、GSAPの導入方法と「Tween」「Timeline」に関する説明を行っていきます。
GSAPの導入方法
GSAPの導入方法は非常にシンプルで、次の公式サイトから、CDNを使ってライブラリを読み込めば導入することができます。
GSAPは公式でインストールヘルパーを用意しているので、そちらにある「Browser code（ブラウザコード）」という欄より次のようなコードを利用しましょう（バージョンは2022年4月現在のものです）。
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/gsap.min.js"></script>こちらをHTMLのheadタグ内に記述してあげると、GSAPを使用する準備が完了します。
記述箇所などは、jQueryのCDNと同じですので、こちらを参考にしてください。
jQueryを勉強する準備をしよう | ZeroPlus Media
Tweenを扱う
先述したうちの片割れであるTweenについて解説していきます。
Tweenに関する公式の説明は、以下の通りです。
Tweenは、すべてのアニメーションが機能するものです。これは、高性能のプロパティセッターのように考えてください。ターゲット（アニメーション化するオブジェクト）、期間、およびアニメーション化するプロパティをフィードし、再生ヘッドが新しい位置に移動すると、その時点でのプロパティ値がそれに応じて適用されるかどうかを判断します。
これを言い換えると、「セレクタとアニメーションに関する期間・変化させるものを簡潔に記述することができて、他にもいろいろ便利にできるよ」というものです。
これを作成するためには、次のメソッド達を使用します。
gsap.to()gsap.from()gsap.fromTo()
というわけで、それぞれを詳しく見ていきます。
gsap.to()
このメソッドは一般的に、特定要素を「現在ある値からto()を用いて指定した値へと変化させる」ことに用いられます。
//.boxの要素を「1秒間」かけて「27度回転」させながら「x軸（横）方向に100px」移動させる。
gsap.to(".box", {rotation: 27, x: 100, duration: 1});See the Pen GSAP Basic Tween by GreenSock (@GreenSock) on CodePen.
上記のコードでは、「.boxの要素を「1秒間」かけて「27度回転」させながら「x軸方向に100px」移動させる」というコードを書いています。
指定の仕方として
gsap.to(セレクタ, {変化させるプロパティ: 変化後の値, duration: 変化させる秒数});という書き方が基本となります。
使用できるプロパティに関してどんなものが使えるかは後述します。
gsap.from()
このメソッドは一般的に、特定要素を「from()を用いて指定した値から変化を始めさせる**」ことに用いられます。
//.classの要素を「1秒間」かけて「不透明度0」「y軸（縦）方向に100px進んだ先」からデフォルトの状態に変化させる。
gsap.from(".class", {opacity: 0, y: 100, duration: 1});See the Pen GSAP Basic From Tween by GreenSock (@GreenSock) on CodePen.
上記のコードでは、「.classの要素を「不透明度0」「y軸方向に100px進んだ先」からデフォルトの状態に変化させる」というコードを書いています。
指定の仕方として
gsap.from(セレクタ, {変化させるプロパティ: 変化前の値, duration: 変化させる秒数});という書き方が基本となります。
gsap.fromTo()
このメソッドは一般的に、特定要素を「変化の始まりから終わりまで指定してアニメーションさせる」ことに用いられます。
//.boxの要素を「4秒間」かけて
// x軸：120 → 0
// 透明度：0 → 1
// 角度：0° → 360°
gsap.fromTo(".box", 4,
{
x: 120,
opacity: 0,
rotation: 0,
}, {
x: 0,
opacity: 1,
rotation: 360
}
);See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
上記のコードでは、「.boxの要素を「4秒間」かけて「不透明度0」から「不透明度1」に、角度を「0°」から「360°」に変化させる」というコードを書いています。
gsap.fromTo(対応セレクタ, アニメーション時間,
{
変化させるプロパティ: 変化前の値
}, {
変化させるプロパティ: 変化後の値,
}
);
//もしくは以下の記述でもアニメーション時間を設定できます
gsap.fromTo(対応セレクタ,
{
変化させるプロパティ: 変化前の値
}, {
変化させるプロパティ: 変化後の値,
duration: アニメーション時間
}
);という書き方が基本となります。
以上がTweenに関してのメソッドでした。
より詳しい内容は公式の次のページを参照すると分かります。
指定できるプロパティに関しては、次のCSSPluginとスペシャルプロパティを使います。
【CSSPlugin（上記ページ参照）】
| GSAP | CSS |
|---|---|
| x: 100 | transform: translateX(100px) |
| y: 100 | transform: translateY(100px) |
| rotation: 360 | transform: rotate(360deg) |
| rotationX: 360 | transform: rotateX(360deg) |
| rotationY: 360 | transform: rotateY(360deg) |
| skewX: 45 | transform: skewX(45deg) |
| skewY: 45 | transform: skewY(45deg) |
| scale: 2 | transform: scale(2, 2) |
| scaleX: 2 | transform: scaleX(2) |
| scaleY: 2 | transform: scaleY(2) |
| xPercent: -50 | transform: translateX(-50%) |
| yPercent: -50 | transform: translateY(-50%) |
【スペシャルプロパティ（上記ページ参照）】
delay - アニメーションが開始するまでの遅延時間。
onComplete -アニメーションの終了時に呼び出されるコールバック。
onUpdate - アニメーションが更新/レンダリングされるたびに呼び出されるコールバック。
ease - アニメーションの変化の緩急。
※こちらより、緩急の付け方を検証・カスタムが行えます。stagger - 各ターゲット/要素アニメーションの開始時間をずらします。
変化を簡潔に記述できるTweenをぜひ使いこなせるようになりましょう。
Timelineを扱う
次に、もう一方の片割れであるTimelineに関して解説していきます。
Timelineに関する公式の説明は、以下の通りです。
Timelineは、Tweenやその他のタイムラインのコンテナとして機能する強力なシーケンスツールであり、Tween全体を簡単に制御し、タイミングを正確に管理できます。
delayタイムラインがないと、すべてのアニメーションにを使用する必要があるため、複雑なシーケンスを作成するのははるかに面倒です。
端的にいうと、「連続するTweenの処理を行うときに、前の処理のアニメーション時間に合わせて遅延させる必要なく、簡潔にタイミングを管理できる」というものです
これを作成するためには、次のtimeline()メソッドを使用します。
gsap.timeline()
まずは、これを使用しない場合と見比べてみましょう。
【Timelineを使用しないで連続したアニメーションを書く場合】
gsap.to("#id", {x: 100, duration: 1});
gsap.to("#id", {y: 50, duration: 1, delay: 1}); //1秒遅延
gsap.to("#id", {opacity: 0, duration: 1, delay: 2}); //2秒遅延１行目→２行目→３行目の順番で連続したアニメーションを起こす時、２つ目のアニメーションの発生を１つ目のアニメーション時間分遅らせる必要があり、３つ目のアニメーションの発生はさらに遅れることになります。これでは、アニメーションが連続するほど複雑な遅延の計算を行わなければならないです。
そこで、TImelineを用いた書き方を見てみましょう。
【Timelineを使用して連続したアニメーションを書く場合】
var tl = gsap.timeline({repeat: 2, repeatDelay: 1});
tl.to("#id", {x: 100, duration: 1});
tl.to("#id", {y: 50, duration: 1});
tl.to("#id", {opacity: 0, duration: 1});Timelineを用いると、遅延を考えずにそのままつなげるだけで、１行目→２行目→３行目の順番で連続したアニメーションを起こすことができます。
アニメーションを並び替えるときや、一箇所のアニメーション時間を変更するのも容易な点から、こちらの書き方は非常に便利であると言えます。
細かい発生タイミングの調整は、次の公式ドキュメントの記述されていますので、使う時が来たらぜひみてみてください。
実装例
See the Pen gsapでスライドショー by ZeroPlus (@zeroplus-programming) on CodePen.
実装例として、TweenとTImelineを組み合わせてスライドショーを作成しました。
公式のデモや、他サイトでの使い方ではさらに複雑なアニメーションも作れるので、基礎としてまずはこの二つを押さえておきましょう。
さいごに
何事もそうですが、慣れるまでは使用例などを見ながら使い方を覚えなければならないです。しかし中でもGSAPは使用の難易度に対してのメリットが大きいので、ぜひ使えるようになって、実務案件でのコスト削減に役立ててください。
また、上記で紹介したTweenとTimelineの他にも、よくあるUIアニメーションを実装できるプラグインを使用することもできるので、そちらの一部に関しては他記事にて解説いたします。
全てを使える必要はありませんが、必要に応じて使えるようになると良いでしょう。
