TimelineMax.add("label") method

[venn]

Hi all,

 

I am trying to understand this 2 pieces of code. 

 

A )

tl.add("Greenlawn Point")
.to($map, 0.5, {x:-155, y:-80}, "Oceanside")
.to($map, 0.5, {x:-656, y:-270}, "Pineapple Island")
.to($map, 0.5, {x:-926, y:-560}, "Oasis Villa")

 

B )

tl.add("Greenlawn Point")
  .to($map, 0.5, {x:-155, y:-80})
  .add("Oceanside")
  .to($map, 0.5, {x:-656, y:-270})
  .add("Pineapple Island")
  .to($map, 0.5, {x:-926, y:-560})
  .add("Oasis Villa");

 

The result produced are different but I thought I have added the labels the same way on both A and B?

 

Cheers, Venn.

[GreenSock]

Almost, but not quite. When you define the insertion point as a label that DOESN'T EXIST, it will automatically add it to the end of the timeline and then put the tween starting there. 

 

In A), you add "Greenlawn Point" at the very beginning, and then you add a tween at "Oceanside" but since "Oceanside" doesn't exist yet, it adds it to the end of the timeline which at that point is ZERO (the timeline is empty) and adds the tween starting there. So in A), you've got "Greenlawn Point" and "Oceanside" at exactly the same place...the beginning. 

 

It looks like you assumed that it would add the tween first and then slap the label on AFTER the tween (but that's not the case). It puts the label in first because it's more intuitive. Otherwise, when you seek("Oceanside"), it would jump to the spot AFTER that tween whereas most people would associate that label with the tween itself, thus it should jump to the spot where the tween starts. 

 

Does that clear things up? 

[venn]

Ah why you so genius! Thanks!