Frame based animation on scroll

[dave1 1 Likes (Newbie)]

Rather then a time based animation I'd like to animate so scrolling down the page will animate a sequence forward and scrolling up with animate a sequence in reverse. Different parts of the sequence could be triggered depending on what elements are in view e.g., https://github.com/s...query-scrollspy

 

This url is a good reference as to what I'm trying to achieve:

 

http://slaveryfootprint.org

[Randall 39 Likes (Newbie)]

I believe that's possible by 'scrubbing' a Timeline forward and backward based on the vertical scroll of the page.

 

The trick is to match up the offset of the vertical scroll to the total frames of the Timeline to get the increments for forward and backward.

[dave1 1 Likes (Newbie)]

Thanks for the tip, so far I'm using the window scroll event to calculate the percent like so:

var pct = $(this).scrollTop() / ($(document).height() - $(window).height());

 

Then I apply the percent to the timeline progress method

tl.progress(pct);

 

Is this the best way or is there a more optimized method?

[Carl 9,066 Likes (Superhero)]

check out John Polacek's Super Scrollorama which is GreenSock powered: http://johnpolacek.github.com/superscrollorama/