TweenMaxを使ってみる

アニメーション系のプラグインとしては大御所のTweenMax.js。
ちなみに、TweenMax自体はjQuery不要だけどjQuery使用前提で書いてます。
いつものごとく、スムーススクロールとか設置してないからブラウザの検索機能使ってね。

TweenMaxとは

公式サイトはこちら
https://greensock.com/tweenmax

世界的に有名なアニメーション系のJavascriptプラグイン。外国の、「このサイトすげえええ！」ってサイトでも使ってたりする。このプラグインすげえええ！
実際問題、アニメーションと聞くとhtmlとcssと簡単なjs（スムーススクロールとか）しかしたことない人にとっては小難しいと感じるかもしれない。
特に、CSS3のanimationやtransitionから入ろうとすると、よくわからないし大したアニメーションが作れない！ってなる。少なくとも自分は２回くらいそうなった。
しかしながら、このTweenMaxはそれを簡単に実装でき、しかもパフォーマンス（カクつきにくいとかそういうやつ）がかなり高い。
アニメーションは作れるようになるとデザイナーもコーダーもかなり仕事の幅や表現の幅が広がり、サイト制作に関する考え方が深まるので是非、使えるようになろう。

実装！・・・の前に

TweenLiteについて

TweenMaxには、軽量版のTweenLiteというのが存在する。
https://greensock.com/tweenlite
ただ、よっぽどパフォーマンスを気にするサイトでない限りはTweenMaxでいいと思う。
というのも、TweenLiteで書いていたけど、追加できた依頼がTweenMaxの機能じゃないと実装できない！ってなった時に、JavascriptでTweenLiteと書いていた部分をすべてTweenMaxに修正しなければいけない。
また、今はもうネットワークもかなり早くなってきており、容量が多少大きくなったところでそこまでの影響はない。
なので、今回はTweenLiteについては記載せず、TweenMaxのみを記述していく。

スマホサイト及びIE8以下はアニメーションさせすぎない

スマホとIE8以下のブラウザは描画性能がそこまでない。最新のスマホしか対応しないというのなら動かせるが、Android4系まで行くとかなり気を使う必要がある。
そのため、スマホ用分岐やブラウザ分岐、時にAndroidのバージョンでの分岐はリッチなアニメーションをつけようとするなら必須だと思っていい。
以下を参考にすればAndroidバージョン分岐ができる。goto_jpさん、ありがとうございます！
http://hacknote.jp/archives/6631/
以下を参考にすればIEのバージョン分岐ができる。cly7796.netさんありがとうございます！
http://cly7796.net/wp/javascript/make-a-determination-using-the-useragent-in-javascript/

実装方法

TweenMaxを読み込む

headタグにcdnでtween.max.jsを読む。cdnは公式ページの右上にあるDOWNLOADボタンをクリックした時に出てくるモーダルの中の、中央にあるものを読み込む。この記事を書いた時だとこれ。

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

旧バージョンが欲しい場合はソース右下にあるVersionのセレクトボックスから選択すると、ソースがまたそれに応じて出てくる。

jQueryを読み込む

（TweenMaxはjQuery不要なプラグインだけど、最初に書いた通り、jQuery前提での記事なので）
jQueryのダウンロードはこちら
https://jquery.com/
旧バージョンはこちら。navet_tktkさんありがとうございます。
https://matome.naver.jp/odai/2138301798034832301

jsを記述する

TweenMaxの記述の仕方はこんな感じ

TweenMax.to(".box", 2, {boxShadow:"0px 0px 20px red", backgroundColor:"#000"});

最初にあるTweenMax.to(…)は、「TweenMaxを使用して、…になっていく」という意味。
()の中身はカンマで３つに区切られてあって、
“.box”は「クラス名boxを持つタグに対して」という意味。
数字の2は秒数。「このアニメーションは2秒かけますよ」という意味。
最後のプロパティはCSSのものと同じプロパティで、{}内に囲まれたものに変化していく。
なので、今回の場合は
「TweenMaxを使用して、クラス名boxを持つタグを2秒かけてbox-shadowを少しずつつけていきつつ、背景の色を2秒かけて#000に少しずつしていく」
となる。もともと.boxの背景が白だったなら、白から灰色になっていき、2秒経過してら真っ黒。
簡単だね！
あとはjQueryで呼び出すタイミングを決めていく。
すぐに呼び出すなら

$(function() {
    TweenMax.to(".box", 2, {boxShadow:"0px 0px 20px red", backgroundColor:"#000"});
});

100pxスクロールした時に呼び出すなら

$(function() {
    $(window).on("scroll",function() {
        var st = $(window).scrollTop();
        if (st > 100) {
            TweenMax.to(".box", 2, {boxShadow:"0px 0px 20px red", backgroundColor:"#000"});
        }
    });
});

こんな感じ。他にも、ボタンを押した時とか、別の要素のアニメーションが終了した時とか。
こういうのを組み合わせることで簡単に、アニメーションがすごいサイトが作れちゃう。
各プロパティには変数も使用できるよ！
注意点があるとするなら、cssのプロパティはコーテーションで囲まないこと。jQueryのcssは囲むけど、これは囲まない。
あと、容量の大きい画像をアニメーションさせるなら$(window).on(“load”,function() {});内で実行させた方がいい。

メソッド一覧

各メソッドについてゆる〜く紹介。わかりやすくするために公式ドキュメントとは順番を変更している。

基本メソッド

TweenMax.to()

例でも書いた通り、最も基本的なメソッド。現在の状態からto()の中に書いてある状態に変化させる。

TweenMax.to(".box", 2, {boxShadow:"0px 0px 20px red", backgroundColor:"#000"});

toの中はカンマ区切りで「どこの要素に対して」「どのくらい時間をかけて」「どの状態にするか」を記述する。
詳細については既に上で解説しているので省略。

TweenMax.from()

TweenMax.from(".box", 2, {backgroundColor:"#000"});

上のTweenMax.to()と逆の動きをする。
カンマ区切りで「どこの要素に対して」「どのくらい時間をかけて」「どの状態からもともとのcssになっていくか」を記述する。
例だと、
「TweenMaxを使用して、クラス名boxを持つタグを2秒かけて背景の色を2秒かけて#000からcssで設定している背景色にしていく」
となる。
ぶっちゃけ実際の案件では使ったことほとんどない。

TweenMax.fromTo()

TweenMax.fromTo(".box", 2, {backgroundColor:"#000"}, {backgroundColor:"#54c0c7"});

上２つの合わせ。
カンマ区切りで「どこの要素に対して」「どのくらい時間をかけて」「どの状態から」、「どの状態にするか」を記述する。
これを使ってアニメーションさせるとしても、cssで初期値的にfrom側の内容を記述した方がjsが正常に読まれなかった時を考えるとした方がいい。

TweenMax.set()

TweenMax.set(".box" , {backgroundColor: '#000'});

要素に対してアニメーションせずにstyleを設定する。
jQueryのcss()と同じという認識で大丈夫。

複数実行系（stagger、timeline）

TweenMax.staggerTo()

TweenMax.staggerTo('.box', 1, {backgroundColor: '#000'}, 0.5);

<div class="box"></div> //1つ目
<div class="box"></div> //2つ目(1つ目のアニメーション開始から0.5秒後にアニメーション開始)
<div class="box"></div> //3つ目(2つ目のアニメーション開始から0.5秒後にアニメーション開始)
<div class="box"></div> //4つ目(3つ目のアニメーション開始から0.5秒後にアニメーション開始)

カンマ区切りで「どこの要素に対して」「どのくらい時間をかけて」「どの状態に」、「何秒間隔でしていくか」を記述する。
どこの要素に対してというのを上例ではクラスで指定したけど配列でもいい。

var hairetu = ['.box','.box2','.box3','.box4']
var tween = TweenMax.staggerTo(hairetu, 5, {backgroundColor: '#000'}, 0.5);

TweenMax.staggerFrom()

TweenMax.staggerFrom('.box', 1, {backgroundColor: '#000'}, 0.5);

もはや言わずもがなだけど、staggerTo()の逆。
当然要素指定している箇所は配列でもできる。

TweenMax.staggerFromTo()

TweenMax.staggerFromTo('.box' , 1 , {backgroundColor: '#54c0c7'} , {backgroundColor: '#000'} , 0.5);

これも言わずもがな。何から何に変わるかを指定できる、fromとtoを合わせたもの。
これも配列で指定できる。

TimelineMax

var timeLine = new TimelineMax();
    timeLine.to($('.box'), 1, {backgroundColor: '#ccc'})
            .to($('.box'), 1, {backgroundColor: '#54c0c7'})
            .to($('.box'), 1, {backgroundColor: '#000'})
            .to($('.box'), 1, {backgroundColor: '#54c0c7'});

単発のアニメーションではなく、１のアニメが終わったら２のアニメで２が終わったら３で・・・っていうタイムラインの作成。
記述はTweenMax.to()と同じ感じ。
例だと、最初はcssで指定している背景色。１秒かけて#cccになり、その後１秒かけて#54c0c7になり・・・となる。
今回は全て$(‘.box’)指定してるけどtimeline上で指定している要素はそれ以外のものが途中で挟まったりしても大丈夫。

var timeLine = new TimelineMax();
    timeLine.to($('.box'), 1, {backgroundColor: '#ccc'})
            .to($('.box2'), 1, {backgroundColor: '#54c0c7'})
            .to($('.box'), 1, {backgroundColor: '#000'})
            .to($('.box3'), 1, {backgroundColor: '#54c0c7'});

動きの制御（repeat・反転・delay・アニメーションプロパティの上書き）

repeat()

TweenMax.to(".box", 1, {backgroundColor: '#54c0c7',repeat: 1});

TweenMax.to(".box", 1, {backgroundColor: '#54c0c7'});
tween.repeat(1);

繰り返し実行する。
AからBにアニメーションで変わった後、一回Aにパッと戻ってまたBに変わるみたいな。背景のリピートとかに使える。
repeatの数字は1スタートなので例では1回リピートする（0スタートではない）。
-1を入れると無限リピートになる。
ちなみにdelayがかかっていた場合、最初の再生だけdelayが適応され、repeatのものには適応されない。
どちらの書き方でもOK。

repeatDelay()

tween.repeat(1).repeatDelay(2);

リピートに対する遅延の秒数を設定できる。

yoyo()

TweenMax.to(".box", 1, {backgroundColor: '#54c0c7',repeat: 1, yoyo : true});

var tween = TweenMax.to(".box", 1, {backgroundColor: '#54c0c7'});
tween.repeat(1).yoyo(true);

var tween = TweenMax.to(".box", 1, {backgroundColor: '#54c0c7'});
tween.repeat(1);
tween.yoyo(true);

ヨーヨー。あの指に紐付けて遊ぶやつ。手元に戻るやつ。
AからBにアニメーションで変わった後、BからAにアニメーションで変わる。
例はどれも同じ意味。
ちなみに自分はヨーヨーできません。

restart()

tween.restart(true,false);

アニメーションを再起動して最初から実行する。repeatと割と似てる。
repeat()の中はカンマ区切りで、1つ目は「2回目もdelayを適応するかどうか(するならtrue、デフォルトfalse)」「2回目もコールバックが実行されるかどうか(するならfalse、デフォルトtrue)」。

invalidate()

tween.invalidate().restart();

アニメーションを再起動する際に、現状を0地点としてスタート再起動する。

reverse()

var timeLine = new TimelineMax();
    timeLine.to($('.box'), 1, {backgroundColor: '#ccc'})
            .to($('.box'), 1, {backgroundColor: '#54c0c7'})
            .to($('.box'), 1, {backgroundColor: '#000'})
            .to($('.box'), 1, {backgroundColor: '#54c0c7'})
            .reverse(4);

タイムラインを逆再生する。
中の数字は秒数で、何秒地点から逆再生を開始するか。
ちなみにマイナスとかも設定できる。

delay()

TweenMax.to(".box", 1, {backgroundColor: '#54c0c7',delay: 5});

var tween = TweenMax.to(".box", 1, {backgroundColor: '#54c0c7'});
tween.delay(5);

tweenアニメーションを遅延させる。
例はどちらも5秒後にtweenアニメーションを実行するもの。

seek()

var tween = TweenMax.to(".box", 10, {backgroundColor: '#54c0c7'});
tween.seek(3);

アニメーションの経過時間をジャンプする。動画でシークバークリックしたらジャンプする、あの感じ。
スキップ機能に使える。

updateTo()

var tween = TweenMax.to(".box", 1, {backgroundColor: '#54c0c7'});
tween.updateTo({css:{backgroundColor: '#000'}}, false);

アニメーションの追加、上書きをすることができる。trueだと、プロパティを変更する際にアニメーションを再起動する、falseだとしない。
例だと背景色は#54c0c7ではなく、#000に変化する。

var tween = new TweenMax(".box", 1, {backgroundColor: '#54c0c7'});
setTimeout(function() {
    tween.updateTo({css:{backgroundColor: '#000'}}, false);
}, 500);

これだと、#54c0c7に変化している途中に軌道修正して#000になっていくような動きに。

var tween = new TweenMax(".box", 1, {backgroundColor: '#54c0c7'});
setTimeout(function() {
    tween.updateTo({css:{backgroundColor: '#000'}}, true);
}, 500);

これだと、#54c0c7に変化している途中で一度動きがリセット（変化前の背景色）になって、その後1秒かけて#000になる。
注意点としては、プラグイン等で追加しているCSSに関してはサポートしてないところ。

動きの制御（停止・倍速）

pause()

var tween = TweenMax.to(".box", 1, {backgroundColor: '#54c0c7'});
tween.pause(0.3);

pauseで指定した変数のアニメーションが()内の秒数で停止する。
アニメーションが中断された要素は中断されたタイミングの状態で固定される。
後述するplay()でpauseまた再生できる。

TweenMax.pauseAll()

TweenMax.pauseAll();

全てのtweenアニメーションを停止する。
動画風のスプラッシュとか作ってるならって感じ？

play()

tween.play();
tween.play(0);

pause()で停止している変数に対してこれを実行することで再び再生できる。
数字が記述されていなければ停止している秒数から再生、数字が記述されているならその秒数から再生される。
後述するresumeと違って、そのアニメーションにreverseが適応されている場合はreverseを解除して実行する。

resume()

tween.resume();
tween.resume(4);

pause()で停止している変数に対してこれを実行することで再び再生できる。
数字が記述されていなければ停止している秒数から再生、数字が記述されているならその秒数から再生される。
上のplay()と違い、再開するアニメーションにreverseが適応されていた場合、reverseが適応されたまま実行する。

TweenMax.resumeAll()

TweenMax.resumeAll();

全てのtweenアニメーションにresumeを適応する。

kill()

var tween = TweenMax.to(".box", 1, {backgroundColor: '#54c0c7'});
tween.kill();

指定した変数が実行しているtweenを中断・終了させる。
アニメーションが中断された要素は中断されたタイミングの状態で固定される。
この後も続くkill系のメソッドはpauseと違って、play()を実行しても再生されない。
特定のプロパティのみしたい時は・・・

tween.kill({backgroundColor:true});

こんな感じ。

TweenMax.killAll()

TweenMax.killAll();

全てのtweenアニメーションをこのプログラムが実行されたタイミングで強制的に中断・終了させる。
例：#fff（白）から#000（黒）に背景色が変化している最中に中断すると灰色で固定される。
全て中断する状況ってなかなかないから使ったことない。

TweenMax.killChildTweensOf()

TweenMax.killChildTweensOf('.box')

指定した要素の中にある子要素全てのtweenアニメーションを中断・終了させる。
.box自体のアニメーションは中断されないので注意。

TweenMax.killTweensOf()

TweenMax.killTweensOf('.box');
TweenMax.killTweensOf('.box', {backgroundColor: 'true'});

指定した要素のアニメーションを中断・終了させる。
1つ目だと全てのアニメーションが中断され、２つ目だとtweenアニメーションの中でも背景色だけ中断される。
ぶっちゃけkill系はこれだけ覚えとけば大体何とかなる。

TweenMax.globalTimeScale()

TweenMax.globalTimeScale(2);

tweenmaxで動いている全てのアニメーションの速度を()内の速度乗算（要するに掛け算）する。

TweenMax.globalTimeScale(2);
TweenMax.fromTo(".box", 1, {backgroundColor:"#000"}, {backgroundColor:"#54c0c7"});
TweenMax.fromTo(".box2", 1, {backgroundColor:"#54c0c7"}, {backgroundColor:"#000"});

だと

TweenMax.fromTo(".box", 0.5, {backgroundColor:"#000"}, {backgroundColor:"#54c0c7"});
TweenMax.fromTo(".box2", 0.5, {backgroundColor:"#54c0c7"}, {backgroundColor:"#000"});

と同じ動きをする。
これの便利なところは既に実行されているtweenに後からこれを実行しても働くところ。

$(function() {
    var timeLine = new TimelineMax();
    timeLine.to($('.box'), 1, {backgroundColor: '#ccc'})
            .to($('.box'), 1, {backgroundColor: '#54c0c7'})
            .to($('.box'), 1, {backgroundColor: '#000'})
            .to($('.box'), 1, {backgroundColor: '#54c0c7'});
});
$(function() {
    setTimeout(function() {
        TweenMax.globalTimeScale(2)
    }, 1500);
});

こうすると途中から倍速になる。
例えば、ビデオでいう早送りボタンとかゆっくり再生ボタンとか作れる。
ちなみに、TweenMax.globalTimeScale(2)した後にTweenMax.globalTimeScale(1)ってすると倍速ではなく、普通の速度で再生される。
（倍速にした後に1にしたら倍速のままかというと、そうではないということ）

timeScale()

var tween = TweenMax.to(".box", 10, {backgroundColor: '#54c0c7'});
tween.timeScale(2);

指定した変数のtweenアニメーションを()内の数字分乗算する。
例だと2倍の速さになる。
他の仕様はglobalTimeScale()と同じはず。

状態

TweenMax.isTweening()

var tween = TweenMax.to(".box", 1, {backgroundColor: '#54c0c7'});
setTimeout(function() {
    console.log(TweenMax.isTweening(".box"));
}, 500);

指定した要素のアニメーションが現在動いているならtrue、それ以外ならfalseを返す。
例ではコンソールにtrueと表示される。
アニメーションが動いている間は他を実行できなくさせる、といった制御ができる。

isActive()

var tween = TweenMax.to(".box", 1, {backgroundColor: '#54c0c7'});
console.log(tween.isActive());

変数のアニメ−ションが現在動いているならtrue、それ以外ならfalseを返す。
例ではコンソールにtrueと表示される。
こっちでもアニメーションが動いている間は他を実行できなくさせる、といった制御ができる。

paused()

var tween = TweenMax.to(".box", 1, {backgroundColor: '#54c0c7'});
tween.pause();
console.log(tween.paused()); //true

変数のアニメーションがpause中ならtrue、そうでないならfalseで返す。
例ではコンソールにtrueと表示される。

reversed

var tween = TweenMax.to(".box", 1, {backgroundColor: '#54c0c7'});
tween.reverse(1);
console.log(tween.reversed()); //true

指定した変数のtweenアニメーションに逆再生が適応されていたらtrue、それ以外ならfalse。

var tween = TweenMax.to(".box", 1, {backgroundColor: '#54c0c7'});
tween.reverse(1);
setTimeout(function() {
    console.log(tween.reversed());
}, 2000);

この場合、reversedが実行されるタイミングだと既にアニメーションは終了しているけどtrueを返したので、アニメーションが終了していてもreverseは適応され続けているっぽい。

duration()

var tween = TweenMax.to(".box", 4, {backgroundColor: '#54c0c7'});
console.log(tween.duration());

その変数のtweenアニメーションにかかる時間を取得する。
例だと4になる。
ちなみに

var tween = TweenMax.to(".box", 4, {backgroundColor: '#54c0c7'});
TweenMax.globalTimeScale(2); //倍速
console.log(tween.duration());

こうするとどうなるかというと結果は4だった。

var timeLine = new TimelineMax();
timeLine.to($('.box'), 1, {backgroundColor: '#ccc'})
        .to($('.box'), 1, {backgroundColor: '#54c0c7'})
        .to($('.box'), 1, {backgroundColor: '#000'})
        .to($('.box'), 1, {backgroundColor: '#54c0c7'})
        .reverse(3.5);
console.log(timeLine.duration());

これも同じ理由で4。なるほど。

また、中に数字を入れるとアニメーションにかかる時間をその時間にしてくれる。

var timeLine = new TimelineMax();
timeLine.to($('.box'), 1, {backgroundColor: '#ccc'})
        .to($('.box'), 1, {backgroundColor: '#54c0c7'})
        .to($('.box'), 1, {backgroundColor: '#000'})
        .to($('.box'), 1, {backgroundColor: '#54c0c7'});
timeLine.duration(2);

こう書くと以下と同じになる。

var timeLine = new TimelineMax();
timeLine.to($('.box'), 0.5, {backgroundColor: '#ccc'})
        .to($('.box'), 0.5, {backgroundColor: '#54c0c7'})
        .to($('.box'), 0.5, {backgroundColor: '#000'})
        .to($('.box'), 0.5, {backgroundColor: '#54c0c7'});
timeLine.duration(2);

endTime()

setTimeout(function() {
    var timeLine = new TimelineMax();
    timeLine.to($('.box'), 1, {backgroundColor: '#ccc'})
            .to($('.box'), 1, {backgroundColor: '#54c0c7'})
            .to($('.box'), 1, {backgroundColor: '#000'})
            .to($('.box'), 1, {backgroundColor: '#54c0c7'});
    console.log(timeLine.endTime());
}, 2000);

ページが読まれてから、そのアニメーションが終了するまでの時間を取得する。
例だと6.052とかそこらへんの数値が出た。
（アニメーション自体が4秒、setTimeoutで2秒、ページの読み込みに0.052秒）

totalDuration()

var tween = TweenMax.to(".box", 10, {backgroundColor: '#54c0c7',repeat:2});
console.log(tween.totalDuration());

そのrepeatやdelayを含んで、アニメーションがどのくらいかかるかを取得できる。
例だと30(10秒のアニメーションを3回繰り返すため)
()内に数字を入れると、そのアニメーションがかかる合計の時間をそれにできる。

progress()

var tween = TweenMax.to(".box", 1, {backgroundColor: '#54c0c7'});
setTimeout(function() {
    console.log(tween.progress());
}, 500);

アニメーションがどのくらい進んでいるかの進捗を取得する。
0がスタートで終了時が1。
例だと約0.5がコンソールに表示される。

totalProgress()

var tween = TweenMax.to(".box", 1, {backgroundColor: '#54c0c7',repeat:2});
setTimeout(function() {
    console.log(tween.totalProgress());
}, 500);

repeatとかも含めたアニメーションの合計時間の中からどのくらい進んでいるかの進捗を取得する。
こちらも0がスタートで終了時が1。
例だと0.163くらい。

time()

var tween = TweenMax.to(".box", 10, {backgroundColor: '#54c0c7'});
setTimeout(function() {
    console.log(tween.time());
}, 2000);

アニメーションが開始してからどのくらい経過したかの時間を取得する。
例だと約2がコンソールに表示される。

tween.time(2);

中に数字を入れると、seekと似たような挙動になる（その秒数にジャンプする）。

totalTime()

var tween = TweenMax.to(".box", 10, {backgroundColor: '#54c0c7'});
setTimeout(function() {
    console.log(tween.totalTime());
}, 2000);

repeatやdelayで経過した時間も含めて、そのアニメーションが一番最初に動き始めてからどのくらい経過したのかの時間を取得する。

startTime()

var tween = TweenMax.to(".box", 1, {backgroundColor: '#54c0c7'});
tween.startTime(3);

中に数値を入れなければ、親のタイムラインの中でこのアニメーションが開始される時間を返す。
数値を入れた場合は親のタイムラインの中でこのアニメーションが開始される時間を数値秒分遅らせる。

コールバック

eventCallback(onComplete)

var timeLine = new TimelineMax();
timeLine.to($('.box'), 1, {backgroundColor: '#ccc'})
        .to($('.box'), 1, {backgroundColor: '#54c0c7'})
        .to($('.box'), 1, {backgroundColor: '#000'})
        .to($('.box'), 1, {backgroundColor: '#54c0c7'});
timeLine.eventCallback("onComplete",end);
function end() {
    console.log("aaa");
}

tweenアニメーション終了時にコールバックする。
reverseしているアニメーションの終了は検知しない。reverseの終了を検知したい場合は後述するonReverseCompleteで。
数値の受け渡しをする時は以下

var timeLine = new TimelineMax();
timeLine.to($('.box'), 1, {backgroundColor: '#ccc'})
        .to($('.box'), 1, {backgroundColor: '#54c0c7'})
        .to($('.box'), 1, {backgroundColor: '#000'})
        .to($('.box'), 1, {backgroundColor: '#54c0c7'});
timeLine.eventCallback("onComplete",end, ["param1の内容"]);
function end(param1) {
    console.log(param1);
}

eventCallback(onReverseComplete)

var timeLine = new TimelineMax();
timeLine.to($('.box'), 1, {backgroundColor: '#ccc'})
        .to($('.box'), 1, {backgroundColor: '#54c0c7'})
        .to($('.box'), 1, {backgroundColor: '#000'})
        .to($('.box'), 1, {backgroundColor: '#54c0c7'})
        .reverse(3.5);
timeLine.eventCallback("onReverseComplete",end, ["param1の内容"]);
function end(param1) {
    console.log(param1);
}

reverseしたアニメーションの終了を検知する。
記述はonCompleteと同じ感じ。

eventCallback(onUpdate)

var timeLine = new TimelineMax();
timeLine.to($('.box'), 1, {backgroundColor: '#ccc'})
        .to($('.box'), 1, {backgroundColor: '#54c0c7'})
        .to($('.box'), 1, {backgroundColor: '#000'})
        .to($('.box'), 1, {backgroundColor: '#54c0c7'});
timeLine.eventCallback("onUpdate",update, ["param1の内容"]);
function update(param1) {
    console.log(param1);
}

アニメーションが実行している時のコールバック。pause()で停止してたりしたら実行されない。
1/60秒に1回の速さで実行する。
記述はonCompleteと同じ感じ。

eventCallback(onUpdate)

var timeLine = new TimelineMax();
timeLine.to($('.box'), 1, {backgroundColor: '#ccc'})
        .to($('.box'), 1, {backgroundColor: '#54c0c7'})
        .to($('.box'), 1, {backgroundColor: '#000'})
        .to($('.box'), 1, {backgroundColor: '#54c0c7'});
timeLine.eventCallback("onStart",start, ["param1の内容"]);
function start(param1) {
    console.log(param1);
}

アニメーションが開始した時に実行されるコールバック。
記述はonCompleteと同じ感じ。

eventCallback(onRepeat)

var timeLine = new TimelineMax();
timeLine.to($('.box'), 1, {backgroundColor: '#ccc'})
        .to($('.box'), 1, {backgroundColor: '#54c0c7'})
        .to($('.box'), 1, {backgroundColor: '#000'})
        .to($('.box'), 1, {backgroundColor: '#54c0c7'})
        .repeat(1);
timeLine.eventCallback("onRepeat",start, ["param1の内容"]);
function start(param1) {
    console.log(param1);
}

リピートした時に実行されるコールバック。
yoyoの場合でも折り返しのタイミングで実行される。
記述はonCompleteと同じ感じ。

TweenMax.delayedCall()

TweenMax.delayedCall(1,tien)
function tien() {
    TweenMax.to(".box", 1, {backgroundColor: '#54c0c7'});
}

delayedCall()内の最初に書かれた数字秒後に後ろに書かれた関数を実行する。
要するにsetTimeoutだと思う。
数値の受け渡しをしたい時は以下
TweenMax.delayedCall(1,tien, [“param1の内容”])
function tien(param1) {
TweenMax.to(“.box”, 1, {backgroundColor: ‘#54c0c7’});
console.log(param1)
}

TweenMax.killDelayedCallsTo()

TweenMax.delayedCall(1,tien)
function tien() {
    TweenMax.to(".box", 1, {backgroundColor: '#54c0c7'});
}
TweenMax.killDelayedCallsTo(tien);

delayedCallを強制終了させる。
例の場合は何も起きない感じになる。

配列化

TweenMax.getTweensOf

var timeLine = new TimelineMax();
timeLine.to($('.box'), 1, {backgroundColor: '#ccc'})
        .to($('.box'), 1, {backgroundColor: '#54c0c7'})
        .to($('.box'), 1, {backgroundColor: '#000'})
        .to($('.box'), 1, {backgroundColor: '#54c0c7'});
console.log(TweenMax.getTweensOf($('.box')));

指定した要素に対してかかっているtweenを配列に入れる。例だと４つのtweenが入る。
何回アニメーションしたか測ったりするのに便利。

TweenMax.getAllTweens

TweenLiteには無い、TweenMax専用機能。

var tween = TweenMax.fromTo(".box", 1, {backgroundColor:"#000"}, {backgroundColor:"#54c0c7"});
console.log(TweenMax.getAllTweens(tween)[1]);

var timeLine = new TimelineMax();
timeLine.to($('.box'), 1, {backgroundColor: '#ccc'})
        .to($('.box'), 1, {backgroundColor: '#54c0c7'})
        .to($('.box'), 1, {backgroundColor: '#000'})
        .to($('.box2'), 1, {backgroundColor: '#54c0c7'});
console.log(TweenMax.getAllTweens(tween)[4]);

tweenの内容を配列に入れる。すんごいふわっとした説明だけど例えば・・・

var timeLine = new TimelineMax();
timeLine.to($('.box'), 1, {backgroundColor: '#ccc'})
        .to($('.box'), 1, {backgroundColor: '#54c0c7'})
        .to($('.box'), 1, {backgroundColor: '#000'})
        .to($('.box2'), 1, {backgroundColor: '#54c0c7'});
console.log(TweenMax.getAllTweens(timeLine)[4].target.selector);

ってすると.box2ってコンソールに表示される。
データの受け渡しとかする時に使う感じかな？自分は使ったこと無いけど。

その他

TweenMax.lagSmoothing()

TweenMax.lagSmoothing(1000,20);

CPUや読み込みの関係でアニメーションがジャンプすることがあるけど、それを防止するおまじない。
例だと、1000ms以上のジャンプが発生する状況になったらそのジャンプが発生する前の状態から滑らかに再生される。
後の数字は、もしこれが実行された時どのくらいパフォーマンスを落とすかの調整のようなもので、数字が低いとパフォーマンスがよく、数字が高いとパフォーマンスが悪いものになる。公式では16〜33を推奨していて、紹介動画では20で紹介していた。

一旦こんなもんかな？
これもチラシの裏の記事であって間違っている箇所がある可能性があるので（一応全部コード書いてチェックはしてるけど）、もし間違えてる箇所や、間違えて解釈しそうな箇所があればコメントくださああああい。
では！