inlinetoc

TweenLite

Tween 클래스의 대표주자 TweenLite http://turfrain.tistory.com/entry/TweenMax

http://hwaba.nflint.com/lab/tween/

TweenLite

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>

TweenMax

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

( jquery 없이 사용 가능 )

var box = document.getElementById( "box" );
TweenLite.to( box, 1.5, { left:100, width:200 } );

TweenLite.to( $("box"), 1.5, { left:100, width:200 } );

====스타일====

TweenLite.to( box, 1.5, { width:800, height:70 } );

TweenLite.to( box, 1.5, { left:400, top:50 } );

TweenLite.to( box, 1.5, { backgroundColor:#00f; } );

TweenLite.to( box, 1.5, { scaleX:2, scaleY:3, rotation:120 } );

TweenLite.to( "#box", 1.5, { left:800, ease:Power3.easeInOut } );

TweenLite.to( box, 1.5, { left:800, delay:1 } );

TweenLite.to( box, 1.5, { left:800, onComplete:endFunction } );

TweenLite.fromTo( box, 1.5, { left:10, height:30 }, { left:800, height:100 } );

var myTween = new TweenLite.to( box, 1.5, { left:800, paused:true } );
myTween.resume();
myTween.reverse();

//mc3을 알파가 0이고, 현재 위치에서 100픽셀 위인 곳에서 현재 위치로 트윈시킵니다. (vars 인수의 오브젝트는 끝나는 지점이 아닌 시작하는 지점입니다.)
TweenLite.from(mc3, 1, {y:"-100", alpha:0});