ProgrammingJavaScript講座第3章 応用・JavaScript関連技術
第3章 応用・JavaScript関連技術

GSAP（GreenSock Animation Platform） -アニメーションライブラリのデファクトスタンダード

GSAP（GreenSock Animation Platform）の概要

GSAP（GreenSock Animation Platform）は、高速・軽量のHTML5アニメーションライブラリで、アニメーションライブラリのデファクトスタンダードといえる程多くのサイトで利用されています。近年、アニメーションはますます重要度を増しています。Webサイトのギャラリーサイトとして有名なAwwwardsでは、日毎、月ごと、年ごとに優れたサイトを表彰していますが、その入賞経験のあるサイトのトレンドを分析すると、90パーセント以上のサイトがアニメーションを使っていて、65パーセントサイトがGSAPを使っているという結果がでました。
GreenSockの主なモジュールとして、トゥイーンを実現するTweenMaxと、タイムラインを制御するTimelineMaxの2種があります。また、TweenMaxと、TimelineMaxのそれぞれの簡易版の2種があります。

ライブラリ説明
TweenMaxHTML5アニメーションライブラリです。
TweenLiteTweenMaxの簡易版です。
TimelineMax複数のトゥイーンやタイムラインを制御します。
TimelineLiteTimelineMaxの簡易版です。

以降の説明はすべてすべての機能が揃っているTweenMax、TimelineMaxが対象です。Max版とLite版の使い方は同じなので、Lite版にも同じ機能が用意されていれば名前を変えるだけでそのまま使えます。
GreenSockはMITやGPLのライセンスではなく、独自のライセンスを採用しています。GreenSockのライセンスを要約すると、無料で公開されているサイトであれば無料ですが、有料なコンテンツがある場合は有料のライセンス登録が必要です。

TweenMaxを使ったアニメーション

TweenMaxはトゥイーン・アニメーションを実現するためのライブラリです。利用するには、オフィシャルサイトからダウンロードするか、CDNサイトでも提供されているので、そのURLを読み込みます。

CDNを利用する場合は、下記のようなSCRIPTタグになります。

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

ダウンロードはGSAPのオフィシャルサイトか、Githubからになります。

GSAPのダウンロードファイルには、srcフォルダがあり、その中にminifiedとuncompressedフォルダがあります。minifiedにはコンパクト化されたTweenMax、TimelineMaxなどが含まれ、uncompressedにはコンパクト化されてないファイルが含まれます。利用する際はminifiedにあるファイルを読み込んでください。

TweenMaxには様々なメソッドが用意されていますが、その中でも代表的なメソッドはfrom()とto()です。ここではfrom()メソッドを使って説明します。from()メソッドは、from()で指定した値から、CSSで設定した状態までアニメーションさせます。引数はターゲット（セレクタかオブジェクト）、アニメーションの実行速度、CSSプロパティやオプションのオブジェクトです。TweenMaxの構文は下記のとおりです。

構文：
TweenMax.from( ターゲット, アニメーション秒数, { 
	CSSプロパティ: 値,
	CSSプロパティ: 値,
} );
引数説明
ターゲットアニメーションのターゲットを指定します。idやclass、jQueryオブジェクトなどで指定できます。また、配列にして複数のオブジェクトを指定することもできます。
秒数アニメーションの秒数を指定します。
CSSプロパティアニメーションさせるCSSプロパティと、オプションをオブジェクト形式で指定します。

第3引数はCSSのプロパティ以外にもTweenMaxが用意しているオプションを指定できます。中でも実行までの待ち時間を指定できるdelay、イージングを指定できるease、コールバック関数を指定できるonCompleteなどが便利です。

コードサンプル：
TweenMax.from( ".btn" , 1 , {
	left : "100px", // CSSプロパティ
	delay : 1, // 実行までの待ち時間
	ease : Power1.easeOut, // イージング
	onComplete : function(){}, // 処理後じ実行する関数を指定
} );

TweenMaxの実例

TweenMaxを使って、ボタンを1秒かけて透明にします。TweenMax.from()はCSSで設定した値から、from()メソッドで指定したCSSの値までアニメーションさせます。HTML、CSS、JavaScriptのコードは下記の通りです。

See the Pen 【07-01-01】GSAP：from()メソッドを使ったアニメーション by jun (@zionboogie) on CodePen.

HTML
button#btn click
CSS
#btn{
	position: absolute;
}
JavaScript
// クリックのイベントリスナーを登録
document.getElementById( "btn" ).addEventListener( "click", function(){
	// 下に40px移動
	TweenMax.from( '#btn', 1, { top: "40px" } );	
} );

ターゲット

ターゲットにはidやclass名以外に、getElementById()やjQueryなどを使って取得したオブジェクトを指定できます。

// jQueryを使ってオブジェクトを取得
TweenMax.from( $("#btn"), 2, { opacity: 0} );

// getElementById()を使ってオブジェクトを取得
TweenMax.from( document.getElementById( "btn" ), 2, { opacity: 0 } );

複数のターゲットを指定したい場合、リストを使います。次の例ではbtn1IDとbtn2IDの要素をターゲットにしています。

TweenMax.from( ["#btn1","#btn2"], 2, { opacity: 0 } );

CSSプロパティ

GSAPに指定できるCSSプロパティには、アニメーションでよく使うCSSとして横幅（width）、高さ（height）、上配置（top）、左配置（left）、背景色（background-color）、外余白（margin）、内余白（padding）などや、回転（rotation）、拡大・縮小（scale）、傾斜変形（skew）、透過（opacity）などがあります。指定方法はオブジェクト形式です。

{
	opacity: 0,
	"background-color" : "#fff"
}

CSSプロパティに数値を指定する場合、加算・減算などの四則演算子も使えます。下記は変数xに100を足して、ピクセル指定しています。

{ left : x + 100 + "px" }

CSSプロパティにハイフンが含まれる場合は、ダブルクォーテーションで囲うか、ハイフンを削除して次の単語の頭文字を大文字にします。

// エラーになります
{ background-color : "#fff" }

// 正常に動作します
{ "background-color" : "#fff" }
{ backgroundColor : "#fff" }

ほとんどのCSSプロパティが提供されていますが、GSAPでは、transform : translateX、transform : translateYの代わりに、X座標（x）、Y座標（y）、Xパーセント（xPercent）、Yパーセント（yPercent）を提供しています。

// ターゲットの位置を40ピクセル右に移動
TweenMax.from( "#btn", 2, { x : 40 } );

// ターゲットの位置を自分の横幅の4倍分の距離に移動
TweenMax.from( "#btn", 2, { xPercent : 400 } );

オプション

CSSプロパティを設定する第3引数には、GSAPが提供する下記のようなオプションも設定可能です。

オプション
プロパティ説明
repeat : 秒数回数分のリピート
yoyo : true/false反復リピート
repeatDelay : 秒数リピートを開始させるまでの待ち時間を設定
delay : 秒数アニメーションを開始させるまでの待ち時間を設定
ease : イージングイージングを設定
paused : 真偽値アニメーションを停止する

TweenMaxには種類豊富なイージングが用意されています。公式サイトで様々なイージングが試せます。

自然なアニメーションに仕上げやすいのがPower1.easeOutからPower4.easeOutあたりで、その他使えるイージングとしてはバネのような効果がだせるElastic、ボールが跳ねたような効果をだせるBounceなどがあります。

// 移動などのアニメーションに使い勝手が良い
TweenMax.from( '#btn', 1, { left: "200px", ease:"power1.out" } );

// バネを伸ばして離したような効果が得られる
TweenMax.from( '#btn', 1, { left: "200px", ease:"elastic.out(1, 0.3)" } );

先程のサンプルを少し変更してイージング処理を試してみましょう。次のコードはボタンをクリックするとバネのようなイージングで右に移動して戻ります。

See the Pen 【07-01-02】GSAP：イージング by jun (@zionboogie) on CodePen.

JavaScript
document.getElementById( "btn" ).addEventListener( "click", function(){
	// バネを伸ばして離したような効果が得られる
	TweenMax.from( '#btn', 1, { x: 400, ease:"elastic.out(1, 0.3)"} ); );
} );

コールバック

GSAPの第3引数には、コールバック関数を指定できます。コールバック関数とは、別の関数から呼び出される関数のことです。GSAPの第3引数に指定した関数は、アニメーションの開始時や終了時に呼び出すことができます。
GSAPのコールバック関数には、アニメーション開始時に実行するonStart、アニメーション中何度も実行するonUpdate、アニメーション終了時に実行するonCompleteがあります。

次のコードはonCompleteにmyFuncという関数を指定しているので、from()メソッド終了時にmyFuncが実行されます。

TweenMax.from( "#btn", 2, { left: "200px", onComplete:myFunc } );

// from()終了後に呼び出される
function myFunc(){
	console.log( "finished" );
}

第3引数の指定方法は、まずコールバック関数の種類を指定し、コロン（：）で区切ったあと実行したい関数名を指定します。

コールバック系メソッド
メソッド名実行されるタイミング
onStartアニメーション開始時
onUpdateアニメーション中何度も
onCompleteアニメーション終了時
onRepeatリピート時
onReverse反復時
onReverseComplete反復終了時

コールバック関数には無名関数を指定できます。次のコードは、［click］とラベルされたボタンをクリックすると、ボタンが右に移動します。その間、移動終了まであと何パーセントかをリアルタイムに表示します。

See the Pen NWGZKGq by jun (@zionboogie) on CodePen.

トゥイーンの参照

TweenMaxのメソッドはトゥイーンの参照を返します。利用法としては、たとえば、pausedオプションを使ってトゥイーンをストップさせた状態にし、そのトゥイーンの参照を変数に代入すると、それ以降はその変数を使ってトゥイーンを操作できます。

// トゥイーンをストップさせた状態にする
var tm = TweenMax.from( '.btn', 1, { left: "200px", paused:true } );

// トゥイーンを再開
tm.resume();

トゥイーンの参照を操作できるメソッドとしては、pause()、resume()、reverse()、restart()などがあります。

トゥイーン操作系メソッド
メソッド名説明
play( 秒数 )アニメーションを再生。開始時間を秒数指定できる。
restart()リスタート
reverse()反復
pause()一時停止
timeScale( 5 )スピードを調節

pause()引数に秒を指定することで、任意の秒数の状態でストップさせることができます。

// アニメーション途中でも3秒後に一時停止
tm.pause( 3 );

timeScale()はアニメーション速度を指定の倍速に変更することができます。

// 8倍の速さで再生
tm = TweenMax.to( ".btn", 10, { x:"600px" } );
tm.timeScale( 8 );

次のコードは2つのボタンに同じスピードを設定しています。ただし、片方のボタンはtimeScale()メソッドで8倍の速さにしています。

See the Pen GSAP トゥイーンの参照 by jun (@zionboogie) on CodePen.

JavaScript部分は以下の通りです。

JavaScript
// .aを600px動かす
TweenMax.to( ".a", 10, { x:"600px" } );

// .aの5倍の速さで再生
tm = TweenMax.to( ".b", 10, { x:"600px" } );
tm.timeScale( 8 );

よく使うメソッド

GSAPが用意しているメソッドには、from()やto()の他に、アニメーションの初期設定をするset()や、複数のターゲットを順番にアニメーションさせるstaggerTo()、staggerFrom()、staggerFromTo()などがあります。

メソッド名説明
set()アニメーションなしで、CSSプロパティ、オプションのみ設定
to()CSSの初期値から設定した値にアニメーションさせる
from()toとは逆に、設定した値から初期値にアニメーションさせる
fromTo()CSSの初期値を設定し、設定した値からアニメーションさせる
staggerTo()/staggerFrom()/staggerFromTo()複数のターゲットを順番にアニメーションさせる

TimelineMaxを使ったトゥイーンの管理

TweenMaxで定義したトゥイーンは全て同時に開始されるため、連続してトゥイーンを続けたい場合、delayオプションを使って前のトゥイーンが終わる時間を指定する必要があります。このような複数のトゥイーンを組み合わせたいような場合は、TimeLineMax使ったほうが簡単に実装できるます。TimeLineMaxはTweenMaxのようにトゥイーンを制御する機能と、さらにそれぞれのトゥイーンを連結する機能が用意されています。連結されたトゥイーンは、最初のトゥイーンが終了するタイミングを待って、自動的に次のトゥイーンが開始されます。

TimeLineMaxもTweenMax.jsに含まれます。CDNであれば次のように読み込んでください。

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

TimelineMaxは最初にインスタンスを生成します。メソッドの定義の仕方はTweenMaxと共通ですが、TimeLineMaxはメソッドチェーンが使えるので、インスタンスを生成したあと、to()やfrom()など複数のメソッドをドット（ . ）で連結することができます。

See the Pen 【07-01-04】GSAP：TimelineMax()の使い方 by jun (@zionboogie) on CodePen.

JavaScript
var tm = new TimelineMax();
// 右に移動
tm.from( "#btn", 3, {
	"x" : 300,
	ease : Power4.easeOut
} )
	// 大きくする
	.from( "#btn", 0.5, {
		scale : 1.5
	});

メソッドチェーンでつなげた場合、前のトゥイーンが終わったタイミングで次のトゥイーンが自動的に開始されます。delayを使ってさらにタイミングを遅らせることもできますが、「-=2」のようにマイナスの値を指定することで前のトゥイーンの途中から次のトゥイーンを開始することもできます。
TimelineMaxのインスタンス生成時に指定可能な主なオプションは以下のとおりです。

オプション説明
delay : 秒数アニメーションを開始させるまでの待ち時間（またはフレーム数）
paused : 真偽値アニメーションを停止する
repeat : 回数回数分のリピート
yoyo : 真偽値反復リピート
onComplete : Functionアニメーション終了時に関数を実行
useFrames : 真偽値アニメーションのタイミングを秒ではなくフレームにする
onStart : Functionアニメーション開始時に実行
onUpdate : Functionアニメーション中随時実行
onRepeat : Functionリピート時に実行
onReverseComplete : Function反復終了時に実行
autoRemoveChildren : Boolean終了時に子トゥイーン、タイムラインを削除
repeatDelay : 秒数リピートを開始させるまでの待ち時間（またはフレーム数）
// repeatオプションを使って5回繰り返します。
var tm = new TimelineMax( { repeat : 5 } );

ラベル

TweenMaxが提供するラベル機能を使うと、アニメーションを開始させるタイミングを簡単に操作することができます。タイムラインに追加したラベルは、あとでそのラベルの位置を参照できます。
たとえば、次のスクリプトはまずx座標を150ピクセル移動し、ラベル名scene1を登録します。次にy座標を150ピクセル、透過を0に指定し、scene1のラベルを指定しています。そのため、この2つのトゥイーンはx座標のトゥイーンが終わると同時に2つのトゥイーンが開始されます。

See the Pen 【07-01-05】GSAP：アニメーションの開始位置をラベルで設定 by jun (@zionboogie) on CodePen.

JavaScript
var tm = new TimelineMax();

// 右に移動
tm.to( "#btn", 1, {
	x : 150
})
	// ラベルを追加
	.add( "scene1" )
	// 縦に移動
	.to( "#btn", 1, {
		y : 150
	}, "scene1" )
	// 透過
	.to( "#btn", 1, {
		opacity : 0
	}, "scene1" );

ラベルは追加時にディレイを指定することができます。秒数を指定すると、そのラベルを指定したアニメーション全てにディレイが適用されます。

// scene1ラベルは3秒後に開始
.add( "scene1", 3 )

ターゲットのラベルを指定する際、演算子を使ってディレイを指定することができます。たとえばscene1の1秒後にアニメーションを開始したい場合は、"scene1 += 1" と記述できます。

// scene1ラベルの1秒後に開始
.to( "#btn", 1, {
		opacity : 0
}, "scene1 += 1" );

play()を使って任意のラベルに飛ばすこともできます。

tl.play( "scene1" );

タイムラインのネスト

タイムラインは他のタイムラインに追加することができます。まずメインのタイムラインを用意し、そのインスタンスに追加したいタイムラインをadd()メソッドで追加します。

var tm = new TimelineMax();
tm.to( "#btn", 1, {
	x : 150
});

var tm2 = new TimelineMax();
tm2.to( "#btn", 1, { opacity : 0 } );
tm.add( tm2 );

上記のコードでは、メインのタイムラインtmがx座標に150ピクセル移動します。追加したいタイムラインtm2は透過します。透過するタイムラインtm2をメインのタイムラインtmに追加すると、移動が終わったタイミングで透過処理が始まります。

任意のラベルから再生する

seek()メソッドは、引数で指定したラベルの位置からアニメーションを開始させることができます。ラベル以前のアニメーションは飛ばされるので、開発時やデバッグ時に便利です。

var tm = new TimelineMax();

tm.to( "#btn", 1, {
	x : 150
})
	.add( "scene1" )
	.to( "#btn", 1, {
		y : 150
	}, "scene1" )
	.add( "scene2" )
	.to( "#btn", 1, {
			x : -150
	}, "scene2" );

"scene2"からアニメーションを開始したい場合は、seek()メソッドに"scene2"を指定します。

tm.seek( "scene2" );

長いアニメーションの場合、途中のトゥイーンを調整するには何度も最初からアニメーションを繰り返すことになり、アニメーションの再生に多くの時間が費やされます。seek()メソッドを使えば、好きなラベルからスタートできるので、確認したいアニメーション部分から開始させることができて非常に便利です。

複数の要素を時間をずらして実行

複数の要素をCSSのクラスでグループ化して、それらのタイミングを少しずつずらしてアニメーションを実行させたい場合、staggerTo()、staggerFrom()、staggerFromTo()が便利です。
これまでに紹介したto()、from()、fromTo()メソッドとほぼ同じですが、、staggerTo()、staggerFrom()、staggerFromTo()には第4引数があり、アニメーション開始までの時間間隔を指定します。同じクラス名を持った複数の要素を用意しておき、次のようにstaggerTo()を使って時間間隔を指定すると、最初の要素が動き始めてから0.5秒たって、次の要素が動き始めます。

tm.staggerTo( ".btn", 1, {
	x : 150
}, 0.5)

staggerTo()メソッドを使ったアニメーションを作成してみましょう。次のコードは4つのボタンが左、下、右の順番に移動します。

See the Pen 【07-01-06】GSAP：staggerTo()メソッドを使ったアニメーション by jun (@zionboogie) on CodePen.

JavaScript部分は以下の通りです。

関連記事