Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
dave1

Frame based animation on scroll

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

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