I need your help!

Basic idea: I want when user scroll to one point (in the middle of the pages - let say it's 500px from top) then we have some animation, of course I won't ask how to do all the animation stuff, but I will need you to give me the basic idea about the callback

Callbacks that I mean: after 1st animation, we get 2nd animation, then 3rd animation. How I approach this?

SCENARIO:

Let say we have 4 boxes, and they have color red, blue, orange and pink.
After user scrolled to 500px from top - I want first red box fadein
2 seconds from that, I want the red box fadeOut, and blue box will fadein.
in my original idea, I will need them to rotate or some other animation - if you could do this too it will be great , please ignore this point if you think I'm asking too much
TOOLS:

jQuery waypoints http://imakewebthings.com/jquery-waypoints/
maybe jQuery transit ? http://ricostacruz.com/jquery.transit/
+1 for the right solutions, as I always appreciate all solutions, I will vote it up if it's works

Thanks!