When using Fullpage.js, overflowing section / slide content will be made scrollable with Slimscroll. If you want to use addons that rely on the natural scroll event, these will fail with Slimscroll. One of the candidates breaking is Scrollreveal.js for example.

I decided to work around that, to allow animations to be triggered when elements become visible or invisible to the viewport.

ADDITIONAL PLUGINS

You could code the viewport visibility check yourself or use the “visible” jquery plugin.

“This is a jQuery plugin which allows us to quickly check if an element is within the browsers visual viewport, regardless of the scroll position. If a user can see this element, the function will return true.” jquery-visible on Github

EXTENDING SLIMSCROLL WITHIN FULLPAGE.JS

The idea was to extend or hook into slimscroll without touching the fullpage.js codebase. Fullpage.js wraps overflowing content within a fp-scrollable container. Slimscroll itself provides events to track your position within the scrollable area in pixels or when top / bottom have been reached.

TRACK TOP / BOTTOM

$(selector).slimScroll().bind('slimscroll', function(e, pos){
    console.log("Reached " + pos");
});

$(selector).slimScroll().bind('slimscroll', function(e, pos){

console.log("Reached " + pos");

});

TRACK POSITION

$(selector).slimScroll().bind('slimscrolling', function(e, pos){
    console.log("Reached " + pos");
});

$(selector).slimScroll().bind('slimscrolling', function(e, pos){

console.log("Reached " + pos");

});

MAIN GOAL

Hook into fullpage.js
Track viewport & visible elements (jquery-visible)
Track direction of scroll
Get current position
Assign classes to elements to trigger animations

MY SOLUTION

This is just a crude and simple starting point, but should give you the basic idea. This still needs some throttling, so that its not called on every scroll position.

var currentScrollDirection = "down";
var currentScrollPosition  = 0;
$("body").delegate(".fp-scrollable", "slimscrolling", function(e, pos){
 
 // Top has been reached						
 if(cPos == 0){
  currentScrollDirection = "down";
 }
 
 // Scrolling up or down?
 if(currentScrollPosition > pos){
   currentScrollDirection = "up"
 }else{
   currentScrollDirection = "down"
 }
 
 // Store current position to compare on next check
  currentScrollPosition = pos;
 
 // Our scroll element
 var element = $(this);
 
 // Using the class "reveal" for all elements to track within 
 // Loop over elements on scroll
 
 element.find(".reveal").each(function(){
 
 // using the visible plugin						
 if ($(this).visible(true) ) {
  // add inView and direction classes
  $(this).addClass("inView")
  .removeClass("outView")
  .removeClass("up")
  .removeClass("down")
  .addClass(direction);
 }else{
  // add outView class and handle other classes
  $(this).addClass("outView")
  .removeClass("up")
  .removeClass("down")
  .removeClass("inView");
									
 }
})

var currentScrollDirection = "down";

var currentScrollPosition = 0;

$("body").delegate(".fp-scrollable", "slimscrolling", function(e, pos){

// Top has been reached

if(cPos == 0){

currentScrollDirection = "down";

}

// Scrolling up or down?

if(currentScrollPosition > pos){

currentScrollDirection = "up"

}else{

currentScrollDirection = "down"

}

// Store current position to compare on next check

currentScrollPosition = pos;

// Our scroll element

var element = $(this);

// Using the class "reveal" for all elements to track within

// Loop over elements on scroll

element.find(".reveal").each(function(){

// using the visible plugin

if ($(this).visible(true) ) {

// add inView and direction classes

$(this).addClass("inView")

.removeClass("outView")

.removeClass("up")

.removeClass("down")

.addClass(direction);

}else{

// add outView class and handle other classes

$(this).addClass("outView")

.removeClass("up")

.removeClass("down")

.removeClass("inView");

}

})

HTML EXAMPLE

<div class="scrollArea">
 <div id="elOne" class="reveal">
 </div>
 <div id="elTwo" class="reveal">
 </div>
 <div id="elThree" class="reveal">
 </div>
</div>

</div>

</div>

</div>

CSS EXAMPLE

Very basic idea to get some transitions working.

.inView.down{
border-left:4px solid red;
opacity: 1;
animation: scaleUpDown 1.5s ease both;
}
.inView.up{
border-left:4px solid blue;
opacity: 1;
}

.outView{
opacity: .6;
-webkit-transition:opacity 1500ms ease-out;
-moz-transition:opacity 1500ms ease-out;
-o-transition:opacity 1500ms ease-out;
transition:opacity 1500ms ease-out;
}

@keyframes scaleUpDown {
 from{ opacity: 0; transform: scale(0.2) rotate(30deg) translate(50%)}; 
 to { opacity: 1; transform: scale(1.0) rotate(0deg) translate(50%)};
}

.inView.down{

border-left:4px solid red;

opacity: 1;

animation: scaleUpDown 1.5s ease both;

}

.inView.up{

border-left:4px solid blue;

opacity: 1;

}

.outView{

opacity: .6;

-webkit-transition:opacity 1500ms ease-out;

-moz-transition:opacity 1500ms ease-out;

-o-transition:opacity 1500ms ease-out;

transition:opacity 1500ms ease-out;

}

@keyframes scaleUpDown {

from{ opacity: 0; transform: scale(0.2) rotate(30deg) translate(50%)};

to { opacity: 1; transform: scale(1.0) rotate(0deg) translate(50%)};

}

Hopefully Fullpage.js will be switching to iScroll natively in the future, as it provides far more options to handle scrollable areas. You can use iScroll now, but you have to disable the scrolling feature within Fullpage.js and call iScroll yourself. Not that difficult to do :)

There is also a WordPress Plugin that wraps Fullpage.js natively with a nice interface (WP_Fullpage) and my upcoming Visual Composer integration, which already uses iScroll :)

Fullpage.js / enhance SlimScroll to detect visible content for animations

ADDITIONAL PLUGINS

EXTENDING SLIMSCROLL WITHIN FULLPAGE.JS

TRACK TOP / BOTTOM

TRACK POSITION

MAIN GOAL

MY SOLUTION

HTML EXAMPLE

CSS EXAMPLE

Enjoy coding ….

Alexander