Greensock tweenlite.to .add()

[billy]

Hi,

 

I found difficult to under the following code example, what's the .add() doing there

 

http://api.greensock.com/js/com/greensock/TimelineLite.html#add()

 

from reading the api i understand it's adding a label, but still find its confuse, can someone explain? 

 

Thanks

 

tl.to(car, 1, {left:177, ease:Back.easeOut})

  .add("up", "+=1")

  .to(car, 1, {top:70}, "up")

  .to(lift, 1, {top:167}, "up")

  .from([man1, man2], 1, {left:-100}, "up+=0.8")

  .from(man3, 1, {left:600}, "up")

  .to(man3, 0.2, {scaleX:-1}, "+=1")

  .staggerTo([man3, man2, man1], 1, {left:600, ease:Power2.easeIn}, 0.5, "menOut")

  .to(lift, 1, {top:297}, "down")

  .to(car, 1, {top:200}, "down")

  .to(car, 1, {left:600, ease:Power1.easeIn}, "out")

 

[Rodrigo]

Hi Billy and welcome to the GreenSock forums.

 

Well add() is kind of the Swiss army knife of Timeline methods. With it you can add labels, functions, Tween instances and even Timelines to the timeline you're working with.

 

The method is quite straight forward, for adding a label:

// at the end of the timeline
tl.add("label");

// to an absolute position, exactly at the timeline's 2 second position
tl.add("label", 2);

// relative to the timeline's end, 2 seconds after the this current position
tl.add("label", "+=2");

For adding a Tween:

var tn = TweenMax.to(element, time, {vars});

tl.add( tn );

The reason to define a TweenMax instance is that all the shorthand methods to(), from(), stagger(), etc. returns TweenLite instances, Unless that for a specific reason, that you might need to manipulate or change something for that tween or maybe remove it, you can use a TweenLite instance.

 

For adding a function (the function will be executed at that exact time);

function foo()
{
  alert("bar!!!");
}

tl.add(foo);

Another Timeline instance:

var tl2 = new TimelineLite();

tl.add( tl2 );

An array of tweens/timelines:

var tl2 = new TimelineLite(),
    tn1 = TweenMax.to(element, time, {vars}),
    tn2 = TweenMax.from(element2, time, {vars});

// this will play all instances at the same time
tl.add([tl2, tn2, tn1]);

// this will play all instances in sequence, one after another
tl.add([tl2, tn2, tn1], "sequence");

In your code is as follows:

// add a to() instance at 0 seconds, which lasts 1 second
tl.to(car, 1, {left:177, ease:Back.easeOut})
//then 1 second after the end of the last instance, in this case the
//car tween add a label called "up"
  .add("up", "+=1")

Also it would be a good idea to check the following links:

 

- A comprehensive guide to begin with the JS version of the engine:

http://www.greensock.com/get-started-js/

 

- GSAP Jump Start to get the basics of the engine and see real code working:

http://www.greensock.com/jump-start-js/

 

- Sequence video tutorial. In this one Carl goes into a very good deal of detail in order to show how to build a robust timeline. Among other arranging instances, working with labels and arrays of tweens:

http://www.greensock.com/sequence-video/

 

Last but not least, please take a look at this post in order to learn how to create a codepen sample, which usually helps to identify the issues a lot faster and gives us the opportunity to see the real code:

http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Rodrigo.

[billy]

wow thanks rhernando for you very detailed reply. 1+