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 scrollin

Solution 1:

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

Reproduction online

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

newfullpage('#fullpage', {
      sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    onLeave: function(origin, destination, direction){
        var curTime = newDate().getTime();

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

        clearTimeout(timeoutId);

        timeoutId = setTimeout(function(){
            animationIsFinished = true;

            fullpage_api.moveTo(destination.index + 1);
        }, delay);

        return animationIsFinished;
    },
});

Solution 2:

#fullpage {
    transition-delay: 1s!important;
}

or modify function addAnimation in fullpage.js

Solution 3:

for me work this variant:

$(elem).fullpage({ 
/// opttions, onLeave: function(origin, destination, direction){ 
if(animationIsFinished === false){ 
// do some code 
} 
clearTimeout(timeoutId); 
timeoutId = setTimeout(function(){ 
animationIsFinished = true;
 $.fn.fullpage.moveTo(destination); 
   setTimeout(() => { 
     animationIsFinished = false; 
   }, 200); 
}, 600); 
return animationIsFinished; 

Solution 4:

This is cheap and easy, but I just wrap the Full Page function I need in custom function wrapper, then use settimeout (a la this answer) to fire it when I'm ready.

functionslideWithDelay() {
    fullpage_api.moveSlideRight();
}

// Change slide on select
$('select').on('change',function(){
    setTimeout(slideWithDelay, 500);
})