GreenSock Learning, TweenLite, TweenMax basic

1. TweenLite.from (object x, time, {opacity:0, left:"1000px"});
 
     This Is an function, you can let one object moving from this position. Whereas, now you create this object, this position is the ending position. The location from function is where object moves from.

Left means distance from left-margin.

However, one thing is important here, which is in CSS, position has to be relative. Because it means that The element is positioned relative to its normal position. So if you do not put it, computer does not know what is the “left” meaning.



The second way:

TweenLite.from(document.getElementById("examp2"),10,{x: 1000});
Second way which is similar, but no need to set relative position. And set x needs to add {}.

2.

     

           TweenLite, to(document.getElementById(“”), 3,{x:1000, delay:3, ease:Strong.easeInOut});

This function is moving to this position, same as last one just opposite direction.
Variables:object, is setting x,y,delay, Ease ……… format:{x:100,delay:3}
Delay is going to happen before function starts.
Ease: giving a specific “feel”, it is the function how the object moves.
Alpha: visible value, for instance, if it TweenLite.from(……alpha:-1), object will be invisible to visible(from-1 to 1). Whereas value less than 0 is invisible.

                                                     升级版的公式(Lcomplex version)

In this function, variables: object, is more complex than before. It includes onComplete,(which is required function, means after moving, this function will be triggled), onCompleteParams(requires array, ??????)
Document.getElementById(“”).innerHTML=””; 

It is changing the element content, as in our element, there is no content, so it is adding content(letters) to our element.

3.   Document.querySelectorAll()

Here is one example to show how this function works. There are 2 <p> tags, this function could distinguish which element to use. So we do not need to declare another class or id to distinguish between <p> element. (checking w3 school example), according to the example, if you use x instead of x[0], then it would change both of it.

This selector also could use in this way, (selecting all of them, but function will work one by one, instead of work as one group).

4. TweenMax() extend TweenLite, adding repeat(), yoyo(), staggerFrom(),staggerTo().
   

I use                             

                                                             Is  equal  to

                           

And my code is

What I want is moving “sub1”, “sub2”, “sub3” separately, so how to choose selector is one problem. StaggerTo() include this function. And document.querySelectorAll() could use for 2 purpose, moving as 1 group or moving seperately.

Other function:

Math.random() from javascript, output random decimal number (0.3454).

Yoyo(), the tween to go back and forth, alternating backward and forward on each repeat./按照原路径返回/

Repeat(), /重复路径， 建议与yoyo配合使用/, repeat:-1, means repeat all the time without stop.

5. TimelineLite() and TimelineMax()

   Both of this function work similar.

   For example,

Even you changed to TimelineMax(), still works same.
But now there is one difference:

I want this function could repeat, but in TimelineLite could not add repeat function, but TimelineMax could.

6.Difference staggerFrom() and from(), staggerTo() and to();

I will use the same function to show the difference.

Duration:19s, from left:1000, without opacity, delay is 7.

All of element will move “together”, delay together.
StaggerFrom(),(delay is 1s)

If delay is 7s,

It means each element will be delayed for 7 seconds.
Note: staggerFrom is using in TimeLineLite or TweenMax not in TweenLite

Chinese version: http://www.cnblogs.com/ddw1997/archive/2009/09/01/1558039.html