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

[cwiggo 0 Likes (Newbie)]

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

 

 

[mvaneijgen 1,730 Likes (Superhero)]

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