Joseph Joseph - 6 months ago 6
Javascript Question

Fullpage.js. Adding a scroll delay

I have a div "box" which fades gradually using ".fp-viewing" as an anchor to start the transition effect when a user scrolls to the next page. The thing is the page starts scrolling when .fp-viewing is triggered and scrolls box out of view before the finish of the animation.

How can I delay the start of the scrolling when .fp-viewing is triggered till box has done its animation in 4s?

transition: all 4s ease-out;
-webkit-transition: all 4s ease-out;

.fp-viewing-2 .box{
opacity: 0;


You can play with the option fullpage.js provides to cancel a movement before it takes place.

Reproduction online

var delay = 2000; //milliseconds
var timeoutId;
var animationIsFinished = false;

    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    onLeave: function(index, nextIndex, direction){
        var curTime = new Date().getTime();

        //animating my element


        timeoutId = setTimeout(function(){
            animationIsFinished = true;
        }, delay);

        return animationIsFinished;