Fading in different items and different times using Greensock Tween

Question

I am really new with GSAP and I think it is amazing. However I cannot work out how to fade in these items separately.

1st one (this is fine) for the 2nd wish to fade in at a certain time and 3rd at a certain time.

JavaScript:

function startFinalAnimation(){
    var fa = new TimelineLite();
    fa.to(finalAvatar, 2, {scale: 0.45, delay: 0, opacity: 1, transformOrigin:"-3% 8.8%"});
    fa.to(finalContent, 4, {delay: 0, opacity: 1});
    fa.to(logo, 5, {delay: 0, opacity: 1});
}

Answer 1

TimelineLite's .to() method syntax is as follows:

timeline.to(target, duration, vars, position);

This fourth position parameter is something you can use to exactly position wherever you want your tween to appear. So you could, for example, do:

function startFinalAnimation(){
    var fa = new TimelineLite();
    fa.to(finalAvatar, 2, { scale: 0.45, opacity: 1, transformOrigin:"-3% 8.8%" });
    fa.to(finalContent, 4, { opacity: 1 }, '-=1');
    fa.to(logo, 5, { opacity: 1 }, '-=2');
}

Here, -=1 (and -=2) basically tell that the animation should be added at an overlap of 1 second onto the previous animation's end, instead of the default which is to append at the very end of previously added animation.

There are many ways a position can be provided. Above, I used -=. Other options are (taken from the link provided below):

• at an absolute time (1).
• relative to the end of a timeline allowing for gaps ("+=1") or overlaps ("-=1").
• at a label ("someLabel").
• relative to a label ("someLabel+=1").

Read more about the position parameter here: Timeline Tip: Understanding the Position Parameter.