.anim-area {
		visibility: hidden;
		opacity: 0;
		transition: all 1s;

		&.anim-from-top		{ transform: translate3d(0, -12rem, 0); }
		&.anim-from-bottom	{ transform: translate3d(0, 12rem, 0); }
		&.anim-from-left	{ transform: translate3d(-20rem, 0, 0); }
		&.anim-from-right	{ transform: translate3d(20rem, 0, 0); }

		@media (max-width: @screen-tablet) {
			&.anim-from-top		{ transform: translate3d(0, -6rem, 0); }
			&.anim-from-bottom	{ transform: translate3d(0, 6rem, 0); }
			&.anim-from-left	{ transform: translate3d(0, 6rem, 0); }
			&.anim-from-right	{ transform: translate3d(0, 6rem, 0); }
		}

		&.anim-zoom { transform: scale(0); }

		&.anim-area-loaded {
			visibility: visible;
			opacity: 1;

			&.anim-from-top,
			&.anim-from-bottom,
			&.anim-from-left,
			&.anim-from-right { transform: translate3d(0, 0, 0); }

			&.anim-zoom { transform: scale(1); }
		}
	}

const lazyLoad = function() {
		let wt = $(window).scrollTop(); // top of the window
		let wb = wt + $(window).height(); // bottom of the window

	    $('.anim-area').each(function() {
	    	let $el = $(this);
	        let ot = $el.offset().top; // top of element
	        let ob = ot + $el.height(); // bottom of element

	        if (!$el.attr('loaded') && wt <= ob && wb >= ot) {
	            $el.addClass('anim-area-loaded').attr('loaded', true);
	        }
	    });
	};

$(document).ready(function() {
		lazyLoad();
		$(window).scroll(function() {
			lazyLoad();
		});
	});