Flash界最強ライブラリの一角
jQuery animateよりも圧倒的パフォーマンス。Flashの最強アニメーションライブラリTweenMax。JavaScript版があるのはご存知でしょうか。
TimlineMax/Lite TweenMax/Liteの4つのライブラリ群の総称でGSAP JSというパッケージ構成です。※要ライセンス注意（後述）
まずはその圧倒的パフォーマンスを体感してください。プルダウンから主要ライブラリを選んで、STARTを押すと右下のfpsの数値が変わります。
GreenSock Animation Speed Test
豊富なアニメーション機能
GSAP JSの主要な機能として下記の物が挙げられます。パララックスなどのインタラクティブなサイトを作る上でもとてもすごく重宝しそうです。
- ベジェアニメーション
- 繰り返し
- 逆再生
- 時間指定
- 一時停止
- フレームラベル
- ゆらゆらアニメーション
- カラーアニメーション
- CSS3 Transformの実行
- アニメーションの階層構造
- タイムライン機能
- IE6対応（余計なことを）
GSAP JSが使われているサイト
昨今レスポンシブデザインと双極をなす流行のパララックス。ajaxサイトでは珍しくローディングパーセンテージを出しているのはなかなかいいですね。写真が上下にアウトして切り替わっていくトランジションが軽快です。
No One Deserves To Die of Lung Cancer
こちらもパララックスのサイト。細かいグラフのアニメーションまでスクロールと連動していて秀逸です。ユーザーのペースでスクロールを使って閲覧できるプレゼンテーションという形でいい見せ方ですね。
Vito Salvatore / Digital Design – Art Direction
シンプルだがポートフォリオの見せ方の構成としては参考にしたいサイト。最低限Flashっぽいサイトを作る上ではこの辺の表現が落とし所なのかもしれない。
GSAP JSのデモ
WebGL x ThreeJS
軽快ですね。ThreeJSパーティクル。WebGLとThreeJSでパーティクルエフェクトのデモ。
HTML5 Animation Tutorial
Flash DeveloperならおなじみのgotoAndLernでチュートリアルが見られます。
gotoandlearn.com – HTML5 Animation with TweenMax
with Adobe Edge Animate
Adobe Edge AnimateとGSAPを組み合わせたデモ。カラーアニメーションがキレイ。Edge Animateについては先日記事で触れていますので併せてどうぞ
インタラクティブなWebサイト制作を加速させるAdobe Animateの使い方
ライブラリのリファレンスはこちら
個人的にはJS DocがASDocで作られているところがなんとも言えないですね。
com.greensock package – GreenSock JavaScript Documentation
ライセンスに注意！
使いたい機能が山ほどありますね。今すぐにでもサイト制作に使いたいところですが、会員登録や課金が必要なサイト制作に使うにはClub GreenSockの有料会員になる必要がありますので注意してください。
JavaScriptアニメーションの選択肢が増えてきましたね。Adobeから出たEdge Animateといい、今後熱くなっていくフィールドだと思います。要チェック。インタラクティブなWebサイト制作を加速させるAdobe Animateの使い方
