CODEWITHSUNDEEP
javascriptjqueryfullpage.js
user10619656
user10619656

Reputation: 11

Delay loading next page fullpage.js not working

I am adding animations between the page transitions using fullpage.js, it is integral that I delay the transitions between the pages so that the animations can be seen by the user. However the method I am using does not work, and I have no information in the console that can help me create the desired effect.

$('#fullpage').fullpage({
  navigation: true,
  anchors: ['code', 'eng']
});
var delay = 2000;
var timeoutId;
var animationIsFinished = false;

new fullpage('#fullpage', {
  onLeave: function(origin, destination, direction) {
    var curTime = new Date().getTime();
    $('.footage').addClass('footage2');
    clearTimeout(timeoutId);
    timeoutId = setTimeout(function() {
      animationIsFinished = true;

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

I would like to delay the page transition so I can add a class to an element before the next page loads.

Upvotes: 0

Views: 147

Answers (1)

user10619656
user10619656

Reputation: 11

I needed to combine both functions

var delay = 2000; //milliseconds
var timeoutId;
var animationIsFinished = false;
new fullpage('#fullpage', {
    sectionsFootage: ['url(./img/pmoney.gif)', 'url(./img/neonLogo.jpg)'],

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

Upvotes: 1

Related Questions