A Pen by Mihovil Ilakovac.

index.html

<div class="row">
  
  <h1>Scroll me babe :P </h1>
  <p>Simple use-case for a "inview" plug-in. I think it works best when watched in the full example view. <a href="http://twitter.com/infomiho" target="_blank">@infomiho</a></p>
 
  
  <div class="panel animate1"><button>Lorem ipsum.</button></div>
  <div class="panel animate1"><button>Excepturi praesentium.</button></div>
  <div class="panel animate1"><button class="alert">Quod iure.</button></div>
  <div class="panel animate1"><img src="http://placecage.com/300/300" alt="" /></div>
  <div class="panel animate2"><button>Incidunt maxime?</button></div>
  <div class="panel animate2"><button>Quo consequatur.</button></div>
  <div class="panel animate2"><img src="http://placecage.com/300/300" alt="" /></div>
  <div class="panel animate2"><button>Optio aspernatur.</button></div>
  <div class="panel animate1"><button>Magnam omnis!</button></div>
  <div class="panel animate1"><button>Dolorum atque.</button></div>
  <div class="panel animate2"><button>Blanditiis officiis.</button></div>
  <div class="panel animate1"><button>Alias repudiandae.</button></div>

</div>

script.js

// in-view plugin 
/**
 * author Remy Sharp
 * url http://remysharp.com/2009/01/26/element-in-view-event-plugin/
 */

(function ($) {
    function getViewportHeight() {
        var height = window.innerHeight; // Safari, Opera
        var mode = document.compatMode;

        if ((mode || !$.support.boxModel)) { // IE, Gecko
            height = (mode == 'CSS1Compat') ?
                document.documentElement.clientHeight : // Standards
            document.body.clientHeight; // Quirks
        }

        return height;
    }

    $(window).scroll(function () {
        var vpH = getViewportHeight(),
            scrolltop = (document.documentElement.scrollTop ?
                document.documentElement.scrollTop :
                document.body.scrollTop),
            elems = [];

        // naughty, but this is how it knows which elements to check for
        $.each($.cache, function () {
            if (this.events && this.events.inview) {
                elems.push(this.handle.elem);
            }
        });

        if (elems.length) {
            $(elems).each(function () {
                var $el = $(this),
                    top = $el.offset().top,
                    height = $el.height(),
                    inview = $el.data('inview') || false;

                if (scrolltop > (top + height) || scrolltop + vpH < top) {
                    if (inview) {
                        $el.data('inview', false);
                        $el.trigger('inview', [false]);
                    }
                } else if (scrolltop < (top + height)) {
                    if (!inview) {
                        $el.data('inview', true);
                        $el.trigger('inview', [true]);
                    }
                }
            });
        }
    });

    // kick the event to pick up any elements already in view.
    // note however, this only works if the plugin is included after the elements are bound to 'inview'
    $(function () {
        $(window).scroll();
    });
})(jQuery);

$(document).ready(function () {

    $('.animate1').on('inview', function (event, visible) {
        if (visible == true) {
            $(this).addClass("active1");
        }
    });
    $('.animate2').on('inview', function (event, visible) {
        if (visible == true) {
            $(this).addClass("active2");
        }
    });
    //added this because of CodePen - not needed in a normal use-case scenario
    $(window).scroll();

});

style.scss

@import "compass";
@import "compass";

.row {
    margin-top: 1.5em;
}

.animate1 {
    @include transform(translateY(100%));
  opacity: 0;
    &.active1 {
   
    @include transform(translateY(0));
    opacity: 1;
    @include transition-property(all);
    @include transition-duration(500ms);
}    
}
.animate2 {
    @include transform(translateX(-100%));
  opacity: 0;
    &.active2 {
   
    @include transform(translateX(0));
    opacity: 1;
    @include transition-property(all);
    @include transition-duration(500ms);
}  
}

::-webkit-scrollbar {  
    width: 12px;  
}  
::-webkit-scrollbar-track {  
    background-color: #eaeaea;  
    border-left: 1px solid #ccc;  
}  
::-webkit-scrollbar-thumb {  
    background-color: #ccc;  
}  
::-webkit-scrollbar-thumb:hover {  
    background-color: #aaa;  
}  
  

THE-WAY-to-animate-elements-when-in-view.markdown

THE WAY to animate elements when in view

A technique I was wondering about and decided to make an example. Used Remy's plug-in. Thanks Remy.

A Pen by Mihovil Ilakovac on CodePen.

License.