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.