If you want to delay fullPage.js animation so the scrolling can take place once an animation is finished, for example, you can use the `beforeLeave` callback.

If you return a `false` value on this callback, the scroll won't take place.

You can use this feature to add your own logic within this callback and control when the scroll will get triggered.

Here's a quick example that will require you 4 scrolls before allowing you to scroll to the next section:

var cont = 0;
new fullpage('#fullpage', {
    beforeLeave: function(origin, destination, direction, trigger){

        // prevents scroll until we scroll 4 times
        return cont === 4;


So, how can you apply it so you can scroll after the animation takes place?

Here's a demo:

See the Pen fullPage.js delay scroll until animation finishes GSAP by Álvaro (@alvarotrigo) on CodePen.


You might also find these articles relevant: