How to defer fullPage.js scroll?

Question

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 onLeave callback false. But in this case I can't trigger the scroll later.

new fullpage('#fullpage', {
  licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
  sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
  
  onLeave: (origin, destination, direction) => {
    
    // This disables scroll, but eliminates all
    // the code below too. This is the only way
    // to disable scroll I found in documentation.
    return false;
    
    // Here I suppose to do my animations
    (() => {
      $('.section').text('My fancy animations! Whoa!');
    })();
    
    // And nooow I need to resume the scroll as such
    $('section *').one('webkitAnimationEnd oAnimationEnd msAnimationEnd animationend', () => {
      
      if(direction === 'down') {
        fullpage_api.moveSectionDown();
      } else {
        fullpage_api.moveSectionUp();
      }
      
    });
    

  }
});

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

<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">Section 1</div>
    <div class="section">Section 2</div>
    <div class="section">Section 3</div>
    <div class="section">Section 4</div>
</div>

Really might help people answer this if you add some code to the question. — Mark, Aug 23 '18 at 18:24
I don't understand. Your onLeave never gets invoked and even if it did all the code after the 'return false' is unreachable. — Uzer, Aug 23 '18 at 19:10
@JonathanKelsey , please, read the comments in the code provided. I think I mentioned exact same things that you said. And I'm seeking the solution to somehow pause fullPage.js scrolling WITHOUT using that `return: false` due to the issues I (in code) and you mentioned. — Azamat Rasulov, Aug 23 '18 at 19:16
@Alvaro , yup, your answer there covers my question. It's hardcoded delay time defined there, though. Any chances we could avoid it? — Azamat Rasulov, Aug 24 '18 at 11:24
Not sure to understand what you mean. Why don't you just change that value for anything else you need? — Alvaro, Aug 26 '18 at 12:18
@Alvaro , I mean, in the answers provided we're firing scroll after a DEFINED delay. I can't use it like this, because my sections contains different number of elements => different animation time, etc. Hardcoded scroll delay time means, that sometimes scroll will fire too early (when not all animations complete), some times – too late. Sooo, I tried to use `.one()` with animation end events instead of fixed delay. But I got some animation glitches, and scroll firing twice SOME TIMES, not always . I'll provide real code of the project later. — Azamat Rasulov, Aug 26 '18 at 17:37

score 2 · Accepted Answer · edited Aug 24 '18 at 10:07

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

Yes, that works. But is there any method to avoid hardcoded animation time? Mine differs from section to section. — Azamat Rasulov, Aug 24 '18 at 11:03
I think your idea of watching the various AnimationEnd events is a smart idea and probably the right way to go. But I couldn't quite get it working as in the example there were no real animation to trigger the events. I'll have a go again when I get the time. — Uzer, Aug 24 '18 at 16:12

How to defer fullPage.js scroll?

1 Answers1

Linked