Jump to content


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

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

Hi guys


Total newbie here experimenting and learning this awesome library.


I have this very simple tween:




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



Link to comment
Share on other sites

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

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();
  .to(mailvan,1,{autoAlpha:0}, "-=1"); // appends -1 second from the end of scale tween
  • Like 1
Link to comment
Share on other sites

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). 

Link to comment
Share on other sites

THANK YOU SO MUCH guys! Sorry to shout :P

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.