Jump to content
Search Community

General Advice on how to implement a unique animation timeline on each user scroll in react

cwiggo test
Moderator Tag

Recommended Posts

Hi GSAP Forum,

 

I've been looking at GSAP for a while now and I cannot find a general solution to a problem i've been trying to address for some time now.

 

My site needs to comprise of 8 sections, that use the native vertical scroll in the browser.

 

Each of the section has a timeline associated to it, in which, the previous section transitions into the next section.

 

The second requirement is that each timeline can vary in length e.g:

  1. section 1 takes 10 seconds to transition into section 2
  2. section 2 takes 8 seconds to transition into section 3

 

The main caveat is that the user is restricted to only scroll once i.e. one mousewheel move, one keypress down or one drag on the scroll bar, in which they will have to wait until the animation/timeline completes for them to be able to scroll again.

 

Can anyone offer a solution or a pointer to a solution?

 

I'm currently using react and gsap

 

Many Thanks,

Chris

 

 

Link to comment
Share on other sites

  • cwiggo changed the title to General Advice on how to implement a unique animation timeline on each user scroll in react
46 minutes ago, cwiggo said:

one drag on the scroll bar

That is not how the native scroll works, so you either have to reinvent your own scroll bar, which I would highly discourage. Or drop the native scroll and look in to the Observer plugin where you can watch for all kinds of events (scroll, drag, keypress) and animate based on those events. Then you can control how much is being animated based on one of these events. 

 

Here is a demo from the docs how that could work. Hope it helps and happy tweening! 

See the Pen XWzRraJ by GreenSock (@GreenSock) on CodePen

  • Like 1
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.
×
×
  • Create New...