inlinetoc

TweenLite

Tween 클래스의 대표주자 TweenLite

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();