CODEWITHSUNDEEP
javascriptjquerycssanimationfullpage.js
jeyy
jeyy

Reputation: 329

How to animate elements before scroll-events take place?

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.

Upvotes: 1

Views: 504

Answers (1)

Michael Coker
Michael Coker

Reputation: 53674

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>

Upvotes: 2

Related Questions