Custom horizontal scroll with animate.css

Question

I have some code:

$(window).load(function(){
 // Horizontal scroll
    if($(".js-page-scroll").length){
        $(".js-page-scroll").mCustomScrollbar({
         axis:"x",
            theme:"dark-3",
            // scrollbarPosition: 'outside',
            advanced:{ autoExpandHorizontalScroll:true },

            callbacks:{
                    whileScrolling:function(){
                     
                     new WOW().init();
                        
                    }
                }
        });
    }
});

main {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    align-content: center;
    justify-content: space-between;
}

section {
    display: block;
    width: 300px;
    border: 1px solid #000;
    padding: 1rem;
}

.js-page-scroll {
    width: 100%;
    overflow-x: auto;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>  

  
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.js"></script>
  
  <div class="js-page-scroll">
    <main>
      <section>
        <h2>1</h2>
        <p class="wow fadeInUp">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
        </p>
      </section>
      <section>
        <h2>2</h2>
        <p class="wow fadeInUp">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
        </p>
      </section>
      <section>
        <h2>3</h2>
        <p class="wow fadeInLeft">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
        </p>
      </section>
      <section>
        <h2>4</h2>
        <p class="wow fadeInUp">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
        </p>
      </section>
      <section>
        <h2>5</h2>
        <p class="wow bounceIn">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
        </p>
      </section>
    </main>
  </div>

I use custom scroll (horizontal) - malihu custom scrollbar

For animation - animate.css and wow.js

The problem is that with the horizontal scroll, the text in the blocks appeared (animated) smoothly and, consequently, sequentially (as when using wow.js).

Question: how to configure wow.js (or, perhaps, what is another plugin) for a horizontal scroll? or How to configure animate.css for a custom scroll (when scrolling blocks appear smoothly, sequentially)?

I might recommend using [ScrollMagic](http://scrollmagic.io/) instead of WOW, as it seems to be more configurable and can handle horizontal scroll (see [here](http://scrollmagic.io/examples/basic/going_horizontal.html)) — zgood, Oct 16 '17 at 17:01
@zgood, I tried and scrollmagic, but I need the class to remain on the back scroll. That is, I can not remove toggle (.setClassToggle ... setClass - there is no such property) — SVE, Oct 16 '17 at 17:27
@zgood I tend to avoid ScrollMagic as it doesn't play well with mobile devices. — Alex, Nov 01 '17 at 16:05
I think you have changed your requirement recently is it so?. I have seen all the tabs has the same animation but now it differs from others. — Satheesh Kumar, Nov 03 '17 at 08:13

Satheesh Kumar · Accepted Answer · 2017-11-03T08:56:37.327

In your snippet, the issue is you have initiated the WOW plugin on the scrolling. That's why the animation for all paragraph tag is triggered simultaneously.

From your snippet, I have added custom code instead of using WOW Plugin. While scrolling I have called custom function added by me animateContent();

JS CODE

// Custome code for smooth animation 

                  function animateContent() {

                   var divWidth = $(".js-page-scroll").width();
                   var divWidthLg = $(".js-page-scroll").width() - 20;
                   var divWidthMd = $(".js-page-scroll").width() - 40;
                   var divWidthSm = $(".js-page-scroll").width() - 100;
                        //console.log(divWidth);
                         //console.log(divWidthLg);console.log(divWidthMd);


                    var section =$("section");


                     section.each(function(){


                     var offset = $(this).offset().left;
                     var ind = $(this).index() + 1;

                    // console.log(ind, offset);

                     if(offset > divWidth) {
                         $("p" , this).addClass("animated fadeOutUp");

                      }

                     if ( (offset < divWidthLg)){

                     if ($("p" , this).hasClass("fadeOutUp")){
                     $("p" , this).removeClass("fadeOutUp");
                     $("p" , this).addClass("animated fadeInUp");
                     setTimeout(function(){
                     $("p" , this).removeClass("fadeInUp");
                     }, 1500);
                     }
                     else {
                     $("p" , this).addClass("animated fadeInUp");
                     }

                     }

                     if(offset < divWidthSm) {
                      // $("p" , this).removeClass("fadeOutUp");
                       // $("p" , this).removeClass("fadeInUp");
                     }

                     });

                }

What I have done:

At first, I have found the total width of the outer div
Then next to it I have found the offset position of each section
If the offset position is less then the total width of outer div and the right offset position, I added animated fadeInUp class thats it.

DEMO

$(window).load(function(){
 // Horizontal scroll
    if($(".js-page-scroll").length){
        $(".js-page-scroll").mCustomScrollbar({
         axis:"x",
            theme:"dark-3",
            // scrollbarPosition: 'outside',
            advanced:{ autoExpandHorizontalScroll:true },

            callbacks:{
                    whileScrolling:function(){
                     animateContent();
                     
                        
                    }
                }
        });
    }
});


// Custome code for smooth animation 
 
                  function animateContent() {
                
              
                
                   var divWidth = $(".js-page-scroll").width();
                   var divWidthLg = $(".js-page-scroll").width() - 20;
                   var divWidthMd = $(".js-page-scroll").width() - 40;
                   var divWidthSm = $(".js-page-scroll").width() - 100;
                        //console.log(divWidth);
                         //console.log(divWidthLg);console.log(divWidthMd);
                         
                         
                    var section =$("section");
                          
                          
                     section.each(function(){
                     
                 
                     var offset = $(this).offset().left;
                     var ind = $(this).index() + 1;
                     
                    // console.log(ind, offset);
                     
                     if(offset > divWidthLg) {
                     
           $("p" , this).addClass("animated fadeOutUp");
                      
                      }
                      
                     if ( (offset < divWidthLg)){
                     
                     if ($("p" , this).hasClass("fadeOutUp")){
                     $("p" , this).removeClass("fadeOutUp");
                     $("p" , this).addClass("animated fadeInUp");
                     setTimeout(function(){
                     $("p" , this).removeClass("fadeInUp");
                     }, 1500);
                     }
                     else {
                     $("p" , this).addClass("animated fadeInUp");
                     }
                     
                     }
                     
                     if(offset < divWidthSm) {
                      // $("p" , this).removeClass("fadeOutUp");
                       // $("p" , this).removeClass("fadeInUp");
                     }
                     
                     });

                            
                
                
                
                }

main {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    align-content: center;
    justify-content: space-between;
}

section {
    display: block;
    width: 300px;
    border: 1px solid #000;
    padding: 1rem;
}

.js-page-scroll {
    width: 100%;
    overflow-x: auto;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>  

  
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.js"></script>
  
  <div class="js-page-scroll">
    <main>
      <section>
        <h2>1</h2>
        <p class="wow fadeInUp">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
        </p>
      </section>
      <section>
        <h2>2</h2>
        <p class="wow fadeInUp">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
        </p>
      </section>
      <section>
        <h2>3</h2>
        <p class="wow fadeInUp">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
        </p>
      </section>
      <section>
        <h2>4</h2>
        <p class="wow fadeInUp">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
        </p>
      </section>
      <section>
        <h2>5</h2>
        <p class="wow fadeInUp">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
        </p>
      </section>
    </main>
  </div>

Here is the demo in Fiddle.

UPDATE (Seperate animation for each element)

Here I have attached the Fiddle demo link.

What I have done here: I just get the animation IN and OUT class form data attribute, and append the required animation when it necessary.

By this you can handle IN and OUT animation for each section.

$(window).ready(function(){
     // Horizontal scroll
        if($(".js-page-scroll").length){
            $(".js-page-scroll").mCustomScrollbar({
             axis:"x",
                theme:"dark-3",
                // scrollbarPosition: 'outside',
                advanced:{ autoExpandHorizontalScroll:true },

                callbacks:{
                        whileScrolling:function(){
                     animateContent();
                        }
                    }
            });
        }
    });
                // new WOW().init();
                
                function animateContent() {
                
              
                
                   var divWidth = $(".js-page-scroll").width();
                   var divWidthLg = $(".js-page-scroll").width() - 20;
                   var divWidthMd = $(".js-page-scroll").width() - 40;
                   var divWidthSm = $(".js-page-scroll").width() - 100;
                        //console.log(divWidth);
                         //console.log(divWidthLg);console.log(divWidthMd);
                         
                         
                    var section =$("section");
                          
                          
                     section.each(function(){
                     
                    var inAnimation = $("p" , this).data("inanimation");
                     var outAnimation = $("p" , this).data("outanimation");
                     var offset = $(this).offset().left;
                     var ind = $(this).index() + 1;
                     
       // console.log(ind, offset, inAnimation, outAnimation);
                     
                     if(offset > divWidthLg) {
                     
           $("p" , this).addClass("animated "+ outAnimation);
                      
                      }
                      
          if ( (offset < divWidthLg)){
                     
                     if ($("p" , this).hasClass("animated")){
                     $("p" , this).removeClass();
                     $("p" , this).addClass("animated "+ inAnimation);
                     
                     setTimeout(function(){
                     $("p" , this).css("background", "red");
                     }, 1500);
                     
                     }
                     
                     else {
                     $("p" , this).addClass("animated " + inAnimation);
                     }
                     
                     }
                               if ( (offset < 0)){
                                          $("p" , this).addClass("animate "+ outAnimation);
                                             setTimeout(function(){
                                           $("p" , this).removeClass();
                                             }, 1500);
                                        }
                     if(offset < divWidthSm) {
                      // $("p" , this).removeClass("fadeOutUp");
                       // $("p" , this).removeClass("fadeInUp");
                     }
                     
                     });

                            
                
                
                
                }

main {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        align-content: center;
        justify-content: space-between;
    }

    section {
        display: block;
        width: 300px;
        border: 1px solid #000;
        padding: 1rem;
    }

    .js-page-scroll {
        width: 100%;
        overflow-x: auto;
    }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>  

  
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.js"></script>
  
        <div class="js-page-scroll">
        <main>
          <section>
            <h2>1</h2>
            <p class="wow" data-inanimation="fadeInUp" data-outanimation="fadeOutUp" data-inanimationn="dsfsdg">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
            </p>
          </section>
          <section>
            <h2>2</h2>
            <p class="wow" data-inanimation="fadeInUp" data-outanimation="fadeOutUp">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
            </p>
          </section>
          <section>
            <h2>3</h2>
            <p class="wow" data-inanimation="fadeInLeft" data-outanimation="fadeOutLeft">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
            </p>
          </section>
          <section>
            <h2>4</h2>
            <p class="wow" data-inanimation="fadeInUp" data-outanimation="fadeOutUp">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
            </p>
          </section>
          <section>
            <h2>5</h2>
            <p class="wow" data-inanimation="bounceIn" data-outanimation="bounceOut">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
            </p>
          </section>
        </main>
      </div>

Hope this will helps you.

Thanks.

Alex · Answer 2 · 2017-11-01T15:49:07.037

Horizontal scroll detection can be achieved with some simple JS without the need for additional libraries. You are using JQuery so this is one possible solution utilising it.

I used Gemini custom scollbar as it's quite light and user friendly.

I have also included an offset so you can decide when to show the animations rather than firing them off as soon as the element is in view.

Check it out the fiddle here: http://jsfiddle.net/zfd2t31h/1/

JS

// Add custom scrollbar
var myScrollbar = new GeminiScrollbar({
  element: document.querySelector('.js-page-scroll')
}).create();

// Add scroll events
var scrollContainer = $('.gm-scroll-view');
var scrollElem = $('section');
var offset = 300;

scrollContainer.scroll(function() {
  var $thisContainer = $(this);

  $thisContainer.find(scrollElem).each(function(n) {
    var $thisElem = $(this);

    if ($thisElem.position().left + $thisElem.width() > 0 && $thisElem.position().left < $thisContainer.width() - offset) {
      $('p', $thisElem).addClass('animated fadeInUp');
    }
  });
});

HTML

<script src="https://cdn.jsdelivr.net/npm/gemini-scrollbar@1.5.3/index.js"></script>
<link href="https://cdn.jsdelivr.net/npm/gemini-scrollbar@1.5.3/gemini-scrollbar.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="js-page-scroll">
  <main>
    <section>
      <h2>1</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
      </p>
    </section>
    <section>
      <h2>2</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
      </p>
    </section>
    <section>
      <h2>3</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
      </p>
    </section>
    <section>
      <h2>4</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimi neque laudantium, facilis explicabo?
      </p>
    </section>
    <section>
      <h2>5</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolorum cumque fugiat ducimus rem dicta sequi neque laudantium, facilis explicabo?
      </p>
    </section>
  </main>
</div>

CSS

main {
  display: flex;
  flex-flow: row;
  align-items: center;
  align-content: center;
  justify-content: space-between;
}

section {
  display: block;
  border: 1px solid #000;
  padding: 1rem;
  flex: 1 0 300px;
}

section p {
  opacity: 0;
}

.gm-scrollbar .thumb {
  background: darkblue;
}

Thank you, but it does not work when I scroll the mouse wheel — SVE, Nov 01 '17 at 15:47
Hmm this is a separate issue to that requested and is not the default supported behaviour in most browsers, however you can use a plugin or some JS to resolve this. Try: https://stackoverflow.com/questions/11700927/horizontal-scrolling-with-mouse-wheel-in-a-div or use a plugin such as: https://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/ — Alex, Nov 01 '17 at 15:55

Custom horizontal scroll with animate.css

2 Answers2

JS CODE

DEMO

UPDATE (Seperate animation for each element)