An example of this trick can be seen on the Jeet Grid System website. When you scroll down, you see that CSS transform animations are triggered.

For this purpose, there are several Javascript / jQuery plugins available. One example of such plugin is WOW. In this tutorial I’ll show how you can achieve this effect without a plugin.

The markup

So let’s begin. First of all the markup. The revealOnScroll class must be added to the elements that will be animated on scroll:

1
<div data-animation="flipInX" data-timeout="400">...some content here...

The data-animation attribute declares the animate.css animation that will be used. It’s also possible to add an extra optional timeout, that could be useful when multiple elements are animated at the same position (see the demo for an example of this).

The Javascript & CSS animations

Then, we need to declare some variables at the top of the Javascript document (don’t forget to load jQuery & Modernizr – needed to check if it’s a “touch” device). I also imported animate.css for the CSS based animations.

1
2
3
  var $window           = $(window),
      win_height_padded = $window.height() * 1.1,
      isTouch           = Modernizr.touch;

Then we have to watch for the scroll event that will be triggered when the user is scrolling:

1
  $window.on('scroll', revealOnScroll);

In the revealOnScroll function we check if the element that must be animated is becoming visible. If so, the animation class is added and that will trigger the CSS animation.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  function revealOnScroll() {
    var scrolled = $window.scrollTop();
    $(".revealOnScroll:not(.animated)").each(function () {
      var $this     = $(this),
          offsetTop = $this.offset().top;

      if (scrolled + win_height_padded > offsetTop) {
        if ($this.data('timeout')) {
          window.setTimeout(function(){
            $this.addClass('animated ' + $this.data('animation'));
          }, parseInt($this.data('timeout'),10));
        } else {
          $this.addClass('animated ' + $this.data('animation'));
        }
      }
    });

Isn’t that easy to achieve? There is also another check for the inverse: when the elements becomes invisible the animation classes are removed. This will make it possible to animate the items more then one time per request.

View the demo