1

need some help with Fullpage.js, but this question can also be seen more generally.

how can I insert an animation before the scroll event takes place? If you have a solution without Fullpage.js you are welcome, too. I read about blocking a scroll/click event altogether somewhere and attribute own functions and methods but that is not what I am searching for, since I am not capable of rewriting any event from the Fullpage.js script. Just want to stick the animation in between the scroll input and the actual scrolling.

Practical example: I scroll, the elements fade out, then the page scrolls to the next section.

Live example: http://www.basicagency.com/yir/

Thanks in advance.

jeyy
  • 159
  • 1
  • 1
  • 5
  • Duplicate of [this other question](http://stackoverflow.com/questions/36176677/fullpage-js-adding-a-scroll-delay/36182162#36182162). Check [the example I gave](http://stackoverflow.com/a/36182162/1081396) – Alvaro Feb 24 '17 at 12:52

1 Answers1

2

I believe you're looking for the onLeave callback.

This callback is fired once the user leaves a section, in the transition to the new section. Returning false will cancel the move before it takes place.

$('#fullpage').fullpage({
  onLeave: function(index, nextIndex, direction){
    alert('onLeave fired');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://alvarotrigo.com/fullPage/jquery.fullPage.min.js"></script>
<div id="fullpage">
  <div class="section">section</div>
  <div class="section">section</div>
  <div class="section">section</div>
  <div class="section">section</div>
</div>
Michael Coker
  • 52,626
  • 5
  • 64
  • 64
  • Thanks Michael, I will check that out! – jeyy Feb 22 '17 at 11:06
  • Okay, I checked that out and understood it. Now it's time to combine it with let's say a jQuery Animation like fade out. How do make it halt the scroll animation, then fire the fade animation and then get go with the scroll animation? `code` $('#fullpage').fullpage({ onLeave: function(index, nextIndex, direction){ if(direction=='down') { $( "h1" ).fadeOut( "slow" ); } } }); `code` – jeyy Feb 23 '17 at 14:53
  • 1
    Thanks, now I got it! – jeyy Mar 03 '17 at 21:20