Joseph Joseph - 7 months ago 18
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?

.box{
transition: all 4s ease-out;
-webkit-transition: all 4s ease-out;
}

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

Answer

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;

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

        //animating my element
        $('#element').addClass('animate');

        clearTimeout(timeoutId);

        timeoutId = setTimeout(function(){
            animationIsFinished = true;
            $.fn.fullpage.moveTo(nextIndex);
        }, delay);

        return animationIsFinished;
    },
});