The revolution slider is a way to animate a web page based on a wordpress plugin. When you create a slider it start to be animated directly when the page is loaded. So if your slider is on top of the page it is perfect but if your animation is on the middle / bottom, the animate will be finished when the user will scroll to that part.

It is possible to custom the javascript part and fix this problem as described in this post.

The API allow to pause and resume slider animation but not the layer animation. In my case I was looking for stoping / resuming the layer animation as it was a text appearing animation. So for doing this the first thing to do is to create a slider with two slides:

• The first slide will be empty and will be the one stop on load
• The second slide will contain the layer animation and will be the one start on scroll

Once this configured, go to the slide setting part ; then click on “API Function” to get revapiX variable to be used. Then go to CSS/Javascript – Custom Javascript area and copy & paste the following code :

(function() {
 
 var win, slider, sliderHeight, sliderPaused, winHeight;
 
 sliderPaused = false;
 // Change revapiX with the one found previously
 slider = revapiX.on('revolution.slide.onloaded', function() { 
 win = jQuery(window).on('scroll', checkScroll).on('resize', sizer);
 sizer();
 });
 
 function sizer() {
    sliderHeight = slider.height();
    winHeight = win.height();
    checkScroll();
 }
 
 function checkScroll() {
    var scrTop = win.scrollTop(),
    offset = slider.offset().top;
 
    if (offset <= scrTop + winHeight && offset + sliderHeight >= scrTop) {
 
     if(sliderPaused) {
     slider.revshowslide(2);
     slider.revresume();
    }
    sliderPaused = false; 
 
 } else {
 
   if(!sliderPaused) {
     slider.revpause();
   } 
     sliderPaused = true; 
   }
 }
 
})();

This code was created from this post and then modified to set the second slide on restart to start the animate of this slide.