How to fade the last second of a 4 second tween?

[gregfly]

Hi guys

 

Total newbie here experimenting and learning this awesome library.

 

I have this very simple tween:

 

TweenLite.to(mailvan,4,{scale:0.05,top:"230px"});

 

Its just a 4 sec animation a van going down a road.

 

What would the syntax be to fade the last 1 second of this animation?

 

Thanks in advance

Vic

 

[jamiejefferson]

You would need to use a second tween to accomplish this:

TweenLite.to(mailvan,4,{scale:0.05,top:"230px"});
TweenLite.to(mailvan,1,{autoAlpha:0,delay:3});

If you need an easy way to maintain the tweens in sync (maybe you'd like to pause it midway etc?), you could add them to a timeline instead:

var tl = new TimelineLite();
tl.to(mailvan,4,{scale:0.05,top:"230px"})
  .to(mailvan,1,{autoAlpha:0}, "-=1"); // appends -1 second from the end of scale tween

[GreenSock]

As usual, Jamie is right on, but I did want to clarify that the tweens will remain perfectly in sync regardless of if you put them into a TimelineLite or not. The entire engine is synchronized. But Jamie's suggestion is definitely best if you need to be able to control them as a whole (which is probably what Jamie meant by keeping them in sync). 

[gregfly]

THANK YOU SO MUCH guys! Sorry to shout