How To Defer Fullpage.js Scroll?

When the user scrolls anywhere, I need to: 1. stop scrolling 2. animate out the stuff in section 3. trigger the scroll then. Everything I found is stopping scrolling by returning

Solution 1:

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

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

Javascript

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

newfullpage('#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;    
  }
});