gsap

• TweenLite
• TweenMax
• TimelineLite
• TimelineMax

https://greensock.com/gsap

gsapとは?

Green Sock社が開発してる、アニメーションライブラリ。

 

結構色んなとこで使われている。

 

ライセンスはMITではなく、独自のライセンス。

無料のwebサイトでは使用してOK。以下参照（英語）

https://greensock.com/licensing

TweenLite

https://greensock.com/tweenlite

基本的にはこれでやりたいアニメーションは実現できる。

足りない機能は、プラグインを追加して実現できる。

 

ドキュメントはこちら

https://greensock.com/docs/TweenLite

TweenMax

https://greensock.com/tweenmax

TweenLiteの強化版。

TweenLiteには無いメソッドとかある。

なので、当然TweenLiteよりファイルサイズは重い

TweenLite: 28KB | TweenMax: 115KB

(単純にダウンロードした圧縮版のファイルサイズ)

 

ドキュメントはこちら

https://greensock.com/docs/TweenMax

TimelineLite

https://greensock.com/timelinelite

タイムラインのアニメーションが簡単に作成できる。

これがこうなったら、次にこれがこうなるっての。

それを逆再生とかも出来る。

 

ドキュメントはこちら

https://greensock.com/docs/TimelineLite

TimelineMax

https://greensock.com/timelinemax

TimelineLiteの強化版。

これもTimelineLiteには無いメソッドとか色々ある

なので、当然TweenLiteよりファイルサイズは重い

TimelineLite: 13KB | TimelineMax: 21KB

(単純にダウンロードした圧縮版のファイルサイズ)

 

ドキュメントはこちら

https://greensock.com/docs/TimelineMax

Velocity.js

http://velocityjs.org/

Velocity.jsとは?

jQueryの$.animate() と同じAPIで動作するアニメーションライブラリ。

単純に $.animate() を &.velocity() に置き換えることで動作する。

指定できる属性が$.animate() よりも豊富。

これ単体でもアニメーションさせることが出来る。