Mouse wheel event callback

[faliqaiman]

Hi Alvaro,

Saw this website, and I would like to know the trick how we can achieve this kind of function with fullpage.js. Or can you prepare this as one of your extension because it seems like can be useful for everyone in future.

The main thing is, when scroll, animation will trigger until the last scroll of the animation. And when the animation is finished, another scroll will lead to next section. (maybe need to set delay timing on onleave function, but I'm not so sure with this one)

From my understanding, it need to concentrate on scroll function, but I not master in javascript code.

Any advice for this issue will be appreciated.

Thanks.

[alvarotrigo]

I'll mark it as an enhancement. The most you can do now is use the cancel movement feature. But that will get fired multiple times (or tens of then on kinetic devices).

[faliqaiman]

Here another one I found on GSAP example, which it utilize fullpage.js plugins. Is this similar by using cancel movement feature?

[alvarotrigo]

That's totally different. Their sections seem to be empty. And they scroll, but you don't notice it. They change the opacity of the text within the sections probably using a callback such as afterLoad.

So, empty sections using the same fixed background will also give you the illusion that you want. Then using the afterLoad or onLeave callbacks you detect a scroll event.

[faliqaiman]

Or can it be nested fullpage.js extension perhaps? Is this possible? Pls advice.

[alvarotrigo]

As I said, they are using empty sections with absolute positioned elements that they decide to show by using callbacks or fullpage.js state classes.

But nevertheless, I'll probably add a callbacks for this in a future release, that's why I'm keeping the topic open.

@faliqaiman if you really need this new callback, contact me for an urgent request and I'll provide you with a quote.

[faliqaiman]

@alvarotrigo, before I forget, I suggest that you should reconsider to create scrollDelay extensions, so each section can have any timing set before jump to prev/next section. Maybe something like this, scrollDelayDown: "", "1000", "4000", "2000" to scroll down, and scrollDelayUp: "2000", "4000", "1000", "" to scroll up.

And with this, can reduce production timeline for animators as well. Just my 2cent.

Peace.

[alvarotrigo]

I don't understand what you mean by that, a delay between scrolling and moving up or down?

In case I create the mouse wheel callback, then your idea could easily be accomplish with the developers own code. So I don't see the need to add into the library. In fact, it can be achieved by using the cancel movement functionality right now.

Check my answer here. Demon online