Jump to content


Timeline "add" — trying to understand the logic

Recommended Posts

I've been studying the GreenSock HTML5 banner example (

See the Pen lEiAv by GreenSock (@GreenSock) on CodePen

)%C2"> am somewhat confused by this syntax

.to($for, 0.2, {autoAlpha:1}, "for")
  .add("introOut", "+=0.7")
  .to($for, 0.2, {autoAlpha:0, left:300}, "introOut")
  .to($animations, 0.2, {autoAlpha:0, top:"-=300px"}, "introOut")
  return tl;

Specifically, what is the logic for 


.add("introOut", "+=0.7")?


Obviously it's adding the animation that is immediately following (the two next lines) at a point .7 seconds beyond the end of the timeline — but why do this at all and not something like

 .to($for, 0.2, {autoAlpha:0, left:300}, "+=0.7", "introOut")
  .to($animations, 0.2, {autoAlpha:0, top:"-=300px"}, "introOut")

Any insight appreciated.


I was also curious, in this animation, what effect the line

  TweenLite.set($deviceHead, {transformPerspective:600});

has — I tried changing the value and got no change in the animation.

See the Pen lEiAv)%C2 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

.add("introOut", "+=0.7")

is adding an "introOut" label 0.7 seconds after the previous animation finished.


The next two lines animations are starting at the same time the "introOut" got created.

But you could also add a delay: "introOut+=1.8" would've started them 1.8sec after the introOut label got created.


A good resource is http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/addLabel/

  • Like 2
Link to comment
Share on other sites

Is there any difference between using "add" vs "addLabel"?

Link to comment
Share on other sites

Nope - it's just that add() can accept a bunch of stuff (a tween, a timeline, a callback, a label, etc.). addLabel() is somewhat of a legacy method from a while back, but it's totally fine to use. 

  • Like 3
Link to comment
Share on other sites

Thanks.  Why wouldn't one do the following though:

.to($for, 0.2, {autoAlpha:0, left:300}, "+=0.7", "introOut")

Wouldn't that both add the label and then add the next animation at that label?  My confusion was there: the separate step for adding the label.  Was there a reason for that?

Link to comment
Share on other sites

It just keeps things clean that way. The way you were suggesting wouldn't work because there's no 5th parameter of to() and it would be counter-intuitive to add it that way since it'd come out of order and it'd force people to define the 4th parameter (even if it's zero) in order to get to define a label. 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.