fullpage.js wait for anime.js animation complete before moving to next section

Question

I'm using jquery fullpage and anime js for my new project.

I'm running animation (appear) when callback afterLoad is fired. My problem is, sometimes when user scrolls faster than animation duration, next animation (hiding) which is fired onLeave is looking not as intended. I tried using anime.js complete callback, but I wasn't able to do what I intended. Online reproduction: https://jsfiddle.net/5mwbh9ok/6/

.heading span {
  position: relative;
display: inline-block;
white-space: pre;
opacity: 0;
}

I found this question, which is similar, but I couldn't implement slide delay for more than 1 slide: Fullpage.js. Adding a scroll delay

What I want to accomplish is to wait for animation to complete before moving to next section.

I'd really appreciate any tips on how to resolve this matter :)

Alvaro · Answer 1 · 2021-06-11T11:18:37.893

You should cancel the scroll by returning false on the onLeave or onSlideLeave callback (depending in whether you use secions or slides).

Take a look at the docs here.

Then depending on the callbacks's direction parameter you can call $.fn.fullpage.moveSectionUp() or $.fn.fullpage.moveSectionDown. (or the respective horizontal methods if you use slides) whenever your animation finishes.

Here's an example: https://jsfiddle.net/alvarotrigo/o5ak4mgd/5/

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

score 0 · Answer 2 · answered Feb 02 '18 at 14:59

You'll have to disable scrolling until after the animation is completed to get this effect, but I would avoid "scroll-jacking". It is pretty annoying to most people and has usability concerns.

You could remove all the future slide form the DOM (or just hide it with CSS), and only add them after the last slide has completed its animation.

You could also just hide the text in each slide until the intro animation is ready to begin.

fullpage.js wait for anime.js animation complete before moving to next section

2 Answers2