Fullpage.js. Adding a scroll delay

Question

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;
}

Alvaro · Accepted Answer · 2018-09-12T21:54:26.997

8

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;

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

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

        clearTimeout(timeoutId);

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

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

        return animationIsFinished;
    },
});

edited Sep 12 '18 at 21:54

answered Mar 23 '16 at 15:23

Alvaro

40,778
30
164
336

I will try your suggestion and see how it works out. Thanks a lot. – Joseph Mar 23 '16 at 19:23
your code working thanks for that, but its not what i wanted. I guess its my fault for not clearly explaining what I need. I watched your video "Create css3 animations between sections with fullpage.js", thats how I developed the css animations code I pasted in my first comment. – Joseph Mar 24 '16 at 01:23
My css animation is triggered when ".fp-viewing" changes and .fp-viewing is triggered when a user scrolls on mouse to new section. The code you pasted delays the triggering of .fp-viewing. thats not what i need. I need .fp-viewing to be triggered first, then delayed for like 5s before scrolling to the next section starts, because my css animation is triggered by .fp-viewing and it needs to finish its animation before scrolling to the next section. – Joseph Mar 24 '16 at 01:36
I am not sure if I am doing this the right way. maybe i need a different trigger for my animations other than .fp-viewing. Any suggestions will be appreciated. Thanks. – Joseph Mar 24 '16 at 01:37
You are not doing it the right way. You should trigger your animation in the `onLeave callback` outside the timeout function. Just add a class to your element there to trigger it. You have think what's the best for your purpose and the class `fp-viewing` is not in this case. – Alvaro Mar 24 '16 at 10:20
You can always invite to a coffee by donating to the fullpage.js project! :) – Alvaro Mar 24 '16 at 15:18

score 1 · Answer 2 · answered May 23 '19 at 20:51

1

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

or modify function addAnimation in fullpage.js

answered May 23 '19 at 20:51

oleg

21
1

So simple and it works for me! Thank you. – Ben Quirk Jan 27 '22 at 00:45

score 0 · Answer 3 · answered May 18 '20 at 15:42

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;

score 0 · Answer 4 · answered May 04 '21 at 23:54

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.

function slideWithDelay() {
    fullpage_api.moveSlideRight();
}

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

Fullpage.js. Adding a scroll delay

4 Answers4

Linked

Related