Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
cerulean

Timeline "add" — trying to understand the logic

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 post
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 post
Share on other sites

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

Link to post
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 post
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 post
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 post
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.

×