SOURCE

function initFadeInUp() {
	var objs = $('.fadeInUp');
	var advanceH = 80;
	TweenMax.set(objs, { opacity:0, y:50 });
	$(window).on('scroll resize', function(){
		var winST = $(window).scrollTop();
		var winH = $(window).height();
		objs.each(function(){
			var offT = $(this).offset().top;
			if(offT < winH || winST > offT - winH + advanceH) {
				TweenMax.to($(this), 1, { opacity:1, y:0 });
			} else {
				TweenMax.to($(this), 1, { opacity:0, y:50 });
			}
		});
	}).trigger('scroll');
}

$(function(){
	initFadeInUp();
});

<ul class="list">
	<li class="fadeInUp"></li>
	<li class="fadeInUp"></li>
	<li class="fadeInUp"></li>
	<li class="fadeInUp"></li>
	<li class="fadeInUp"></li>
	<li class="fadeInUp"></li>
	<li class="fadeInUp"></li>
	<li class="fadeInUp"></li>
	<li class="fadeInUp"></li>
	<li class="fadeInUp"></li>
	<li class="fadeInUp"></li>
	<li class="fadeInUp"></li>
	<li class="fadeInUp"></li>
	<li class="fadeInUp"></li>
	<li class="fadeInUp"></li>
	<li class="fadeInUp"></li>
	<li class="fadeInUp"></li>
	<li class="fadeInUp"></li>
</ul>

html, body, ul, li {
	margin: 0;
	padding: 0;
}

li {
	list-style: none;
}

.list {
	width: 500px;
	overflow: hidden;
}

.list li {
	float: left;
	margin: 5px;
	width: 200px;
	height: 200px;
	background: #ccc;
}