Tween Maxの説明

TweenMaxは、スピードも早い高機能なアニメーションライブラリになります。
jQueryに依存はしていませんのでTweenMaxのみ読み込んでも動きます。
CSSでアニメーションを書くよりもスマートに書くことができます。

 

ライセンス

TweenMaxのライセンスは、無料で公開されるなら商用コンテンツでも無償で使用可能だそうです。
有料でないと見られなかったり、有料会員向けの場合はライセンスを購入する必要があるようです。

詳しくはこちらをご覧ください。
・ライセンス
・標準的な「無償」 GreenSockライセンス

 

TweenMaxの使い方

●TweenMaxのダウンロード
サイトからダウンロードします。

http://greensock.com/

 

●TweenMaxのjsを設置し四角を左から右に移動

01.HTMLで動かす要素を設置

<div id="box">BOX</div>

<style>
#box {
  position: relative;
  width: 100px;
  height: 100px;
  background: #cc000;
  color: #fff;
}
</style>

 

02.TweenMaxのjsを設置

<script type="text/javascript" src="js/TweenMax.js"></script>
	
<script>
TweenMax.to('#box', 0.5, { left: 300 });
</script>

※jsの読み込む位置はfooterに読込んでください。
動かす要素の「id="box"」より上にあると動きません。

デモ

 

TweenMaxの説明

01.TweenMaxのファイル
・TweenMax.js
・TweenLite.js
・TimelineMax.js
・TimelineLite.js

●Liteがついているものが軽量版になります。
●TweenMax
　アニメーションを実行するときに使用します。
●TimelineMax
　複数のアニメーションを実行するときに使用します。
　詳しくはこちら

 

02.TweenMax 設定したjsの説明
TweenMax.to('#box', 0.5, { left: 300 });

to
オブジェクトの操作方法
その他に
・to(指定のプロパティの値を、初期値から設定した値にアニメーションさせる)
・set(指定のプロパティの値を設定する（アニメーションはされない）)
・from(指定のプロパティの値を、設定した値から初期値にアニメーションさせる)
・fromTo(指定のプロパティの値の初期値を再設定し、設定した値から初期値にアニメーションさせる )
などの指定ができます。

#box
アニメーションさせる要素

0.5
アニメーションの時間(0.5秒)

left: 300
アニメーションの動き

以上が今回設定したアニメーションの動きの説明になります。

今回はTweenMaxの簡単な説明になります。
調べると沢山の使い方がありますので是非使ってみて下さい。