TweenLite.to() play animation var tween = document.getElementsByClassName('tween1');
TweenLite.to(tween , 2 , {width:100 , height:100 , backgroundColor:"#ff0000" } );

The target can also be an array of objects. play animation

TweenLite.from()play animation TweenLite.from('.twennfrom1',5,{opacity:0 , rotation:360 , x:700});

TweenLite.fromTo()play animation TweenLite.fromTo('.tweenfromto' , 3 , {width:600 , opacity:0 },{width:100 , opacity:1,paused:true} );

Function-based values play animationrefresh page and click TweenLite.to('.tweenx',3,{x: function(){return Math.random() * 400;}});
play animation TweenLite.to('.tweeny',2,{x:function(index,target) {console.log(index + target);return (index + 1) * 200;

.Delay()play animation var animation1 = TweenLite.to('.tween-delay',2,{x:300 , delay:3});
console.log(animation1.delay()); // get curent delay 3
animation1.delay(0);// set new delay

Delay on TweenLite.from() works
play animation
"immediateRender:true" default var animation2= TweenLite.from('.tween-from-delay-1',2 ,{x:800 , delay:2,immediateRender:true });

---

"immediateRender:false" var animation3= TweenLite.from('.tween-from-delay-2',2 ,{x:800 , delay:2, immediateRender:false });

TweenLite.delayedCall()click and wait 3s


animation4 = TweenLite.delayedCall(3,myfunctiontocall,["Omar","24"]); //call the function 'myfunctiontocall' after 'delay' 3s

.duration()click to animated



You can set duration : duration(number);

.eventCallback()click to animatedrefresh to click again

var animation6 = TweenLite.to('.eventCallback',4,{rotation:360 , x:600});
animation6.eventCallback("onComplete",callbackfunction);

wait until complete animation

---

The same : TweenLite.to('.eventCallback',2,{rotation:360 , x:600, onComplete:callbackfunction});

.invalidate()

var animation7 = TweenLite.to('.invalidate',3,{x:"+=100" , rotation:"+=360" });
$('.restart').click(function () { animation7.restart(); });

$('.Invalid').click(function () {
animation7.invalidate();
animation7.restart(); }); Restart invalidate & Restart

.isActive()

(click + 2time)You can restart only if animation stop it(Green BOX) (click + 2time)You can restart any time if you want(red box)

.kill()

Play first Click To kill all animation property Click To kill backgroundColor animation Click To kill rotation animation Click To kill Translate animation

TweenLite.killDelayedCallsTo()

wait 3s to see text below => refresh to repeat

If you click you dont see the text below never

.pause(),.restart(),.play(),.progress()

Play Restart Pause jumps to exactly 2-seconds into the animation and pause gets current progress (0 To 1) gets current paused() state True/False

.reverse()

Play/Restart reverse() gets current reversed() state True/False

.seek()

restart Jumps to a specific time seek()

.resume()

play() pause() resume()

TweenLite.set()

Immediately sets properties of the target accordingly

add translate tx:100 Immediately

.startTime()

play gets current start time

Not Clear to me yet

.time()

gets current time which will never be less than 0 or greater than the animation's duration
Duration of this animation is 3

play gets current time

.timeScale()

1 = normal speed (the default)
0.5 = half speed,
2 = double speed

Play set timeScale(0.5) set timeScale(2) gets current timeScale