Scroll until animation is finished, then continue regular scrolling?

Question

I'm trying to accomplish something like this: https://www.tomahawk.vc/

The page doesn't move until the animation is finished and then it keeps scrolling regularly.

How do I achieve something like that without having to scroll the website in the website, therefore taking me to the end of the page?

For further information: On the site I'm working on I'm also using FullPage.js

Best, Timo

Answer 1

You can use the beforeLeave callback.

Here's an article explaining how to do it.

Example:

new fullpage('#fullpage', {
    beforeLeave: function(origin, destination, direction, trigger){

        // prevents scroll until animation is done
        return isAnimationDone();
    }
});

// return true or false
function isAnimationDone(){
  // your logic here
}