animate.css and scrolling based animations with jQuery

Question

I'm using animate.css CSS3 animations and I want them to show up as you scroll down the page. I ran into a problem and cannot figure it out.

I use the following script from a website:

$(window).scroll(function() {
    $('#animatedElement').each(function(){
    var imagePos = $(this).offset().top;

    var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow+400) {
            $(this).addClass("slideUp");
        }
    });
}); 

I modified it a little bit to this:

$(window).scroll(function() {
    $('.hidden').each(function(){
    var imagePos = $(this).offset().top;

    var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow+400) {
            $(this).removeClass("hidden").addClass("animated");
        }
    });
}); 

I want to hide the elements until they are in the visible area of the website and I give them a class called "hidden" with opacity: 0 or visibility: hidden.

Even though the script successfully removes the "hidden"-class and adds the "animated"-class, there is no animation going on, the element just appears.

I thought that it has something to do with the css of the "hidden"-class, but even if I define nothing under this class, there are no animations.

If I change the script to add a specific animation-class insted of the "animated"-class, it works, but only without the "hidden"-class.

I hope you understand what I mean, it is quite hard to explain, so I made a fiddle.

http://jsfiddle.net/79MJs/

However, I want the script to work with different animations and not only one like in the fiddle.

I really cannot figure this out, so I really appreciate any help. Thanks!

Answer 1

The behaviour you had was because you gave the '.animated' class from the start, and the animation was terminated before you arrived to the elements.

Please note that you need to modify the html and css code also to use the animation as you want.

Please see the following demo which runs multiple animations.

JS:

var animations = ['animated', 'animated-right'];
var i = 0;
$(window).scroll(function() {
    $elem = $('.hidden:first');
    var imagePos = $elem.offset().top;
    var topOfWindow = $(window).scrollTop();
    if (imagePos < topOfWindow + 400) {
        var animationClass = animations[i % 2 == 0 ? 1 : 0];
        $elem.removeClass("hidden")
             .addClass(animationClass);
        i++;
    }
});

CSS

.hidden { visibility: hidden;}
.vertical-slide {
    border: 1px solid #000;
    height: 500px;
}
.animated,
.animated-right{
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes animated {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes animated {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translatex(10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.animated {
  -webkit-animation-name: animated;
  animation-name: animated;
}

.animated-right {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

HTML:

<div class="vertical-slide">
    <article>
        <h1 class="animated">1</h1>
    </article>
</div>
<div class="vertical-slide">
    <article>
        <h1 class="hidden">2</h1>
    </article>
</div>
<div class="vertical-slide">
    <article>
        <h1 class="hidden">3</h1>
    </article>
</div>
<div class="vertical-slide">
    <article>
        <h1 class="hidden">4</h1>
    </article>
</div>
<div class="vertical-slide">
    <article>
        <h1 class="hidden">5</h1>
    </article>
</div>