Fullpage.Js. Adding a Scroll Delay

Fullpage.js. Adding a scroll delay

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

How to defer fullPage.js scroll?

So I think you are asking how to delay the scrolling until after some animations have complete. Here is a working example for that: https://jsfiddle.net/9w1tb85p/46/ You just need to add your additional animations and keep track of how long the transitions will take.

CSS

.section {
  text-align:center;
  font-size: 3em;
}

HTML

<script src="https://rawgit.com/alvarotrigo/fullPage.js/dev/src/fullpage.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fullpage">
    <div class="section" id="section4">Section 1</div>
    <div class="section">Section 2</div>
    <div class="section">Section 3</div>
    <div class="section">Section 4</div>
</div>

Javascript

var done = false;
var animationTimeout;
var transitionTimeout;
var animationTime = 1000;
var transitionTime = 500;

new fullpage('#fullpage', {
  sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
  onLeave: function(origin, destination, direction) {
        if (done) return ;
        //cancel any previous timeout as onLeave fires quite a bit.
        clearTimeout(animationTimeout);
    clearTimeout(transitionTimeout);
    // do animations
    $('.section').text('My fancy animations! Whoa!'+Math.random());
    // after animation time scroll up or down
    animationTimeout = setTimeout(()=>{      
      //deal with scroll
      done = true;
      if(direction === 'down') {
          fullpage_api.moveSectionDown();
      } else {
          fullpage_api.moveSectionUp();
      }
      transitionTimeout=setTimeout(()=>done=false,transitionTime);
    },animationTime);
    return done;    
  }
});

Add option on FullPage.js when screen size is equal to 480 and below

The question has been answered on the fullpage.js isssues forum:

I would recommend you to just listen to the resize event.
When the viewport becomes less than 480px width then you can add a class to those elements, for example .normalScroll.
And when it becomes bigger you can remove it.

To do so you can use the afterResize event that fullpage.js provides.

Then you can use this option on fullpage.js initialisation.

new fullpage('#fullpage', {
    normalScrollElements: '.normalScroll',
    afterResize: function(width, height) {
        var normalScrollSelectors = ['.hero', '.news'];
        console.log(width)
        normalScrollSelectors.forEach(function(selector) {
            if (width < 440) {
                document.querySelector(selector).classList.add('normalScroll');
            } else {
                document.querySelector(selector).classList.remove('normalScroll');
            }
        });
    }
})

<div id="fullpage">
    <div class="section">
        Section 1
        <div class="news">
           Testing...
        </div>
    </div>
    <div class="section">Section 2
        <div class="hero">
           Testing...
        </div>
    </div>
    <div class="section">Section 3</div>
    <div class="section">Section 4</div>
    
</div>

---

Related Topics