https://arsmagazine.com/wp-content/plugins/simple-masonry-layout/assets/js/AnimOnScroll.js?ver=7.0.4

1/**
2 * animOnScroll.js v1.0.0
3 * http://www.codrops.com
4 *
5 * Licensed under the MIT license.
6 * http://www.opensource.org/licenses/mit-license.php
7 * 
8 * Copyright 2013, Codrops
9 * http://www.codrops.com
10 */
11 
12;( function( window ) {
13	
14	'use strict';
15	
16	var docElem = window.document.documentElement;
17
18	function getViewportH() {
19		var client = docElem['clientHeight'],
20			inner = window['innerHeight'];
21		
22		if( client < inner )
23			return inner;
24		else
25			return client;
26	}
27
28	function scrollY() {
29		return window.pageYOffset || docElem.scrollTop;
30	}
31
32	// http://stackoverflow.com/a/5598797/989439
33	function getOffset( el ) {
34		var offsetTop = 0, offsetLeft = 0;
35		do {
36			if ( !isNaN( el.offsetTop ) ) {
37				offsetTop += el.offsetTop;
38			}
39			if ( !isNaN( el.offsetLeft ) ) {
40				offsetLeft += el.offsetLeft;
41			}
42		} while( el = el.offsetParent )
43
44		return {
45			top : offsetTop,
46			left : offsetLeft
47		}
48	}
49
50	function inViewport( el, h ) {
51		var elH = el.offsetHeight,
52			scrolled = scrollY(),
53			viewed = scrolled + getViewportH(),
54			elTop = getOffset(el).top,
55			elBottom = elTop + elH,
56			// if 0, the element is considered in the viewport as soon as it enters.
57			// if 1, the element is considered in the viewport only when it's fully inside
58			// value in percentage (1 >= h >= 0)
59			h = h || 0;
60
61		return (elTop + elH * h) <= viewed && (elBottom - elH * h) >= scrolled;
62	}
63
64	function extend( a, b ) {
65		for( var key in b ) { 
66			if( b.hasOwnProperty( key ) ) {
67				a[key] = b[key];
68			}
69		}
70		return a;
71	}
72
73	function AnimOnScroll( el, options ) {	
74		this.el = el;
75		this.options = extend( this.defaults, options );
76		this._init();
77	}
78
79	AnimOnScroll.prototype = {
80		defaults : {
81			// Minimum and a maximum duration of the animation (random value is chosen)
82			minDuration : 0,
83			maxDuration : 0,
84			// The viewportFactor defines how much of the appearing item has to be visible in order to trigger the animation
85			// if we'd use a value of 0, this would mean that it would add the animation class as soon as the item is in the viewport. 
86			// If we were to use the value of 1, the animation would only be triggered when we see all of the item in the viewport (100% of it)
87			viewportFactor : 0
88		},
89		_init : function() {
90			this.items = Array.prototype.slice.call( document.querySelectorAll( '#' + this.el.id + ' > .grid-sm-boxes-in' ) );
91			this.itemsCount = this.items.length;
92			this.itemsRenderedCount = 0;
93			this.didScroll = false;
94
95			var self = this;
96
97			imagesLoaded( this.el, function() {
98				
99				// initialize masonry
100				new Masonry( self.el, {
101					itemSelector: '.grid-sm-boxes-in',
102					transitionDuration : 0
103				} );
104				
105				if( Modernizr.cssanimations ) {
106					// the items already shown...
107					self.items.forEach( function( el, i ) {
108						if( inViewport( el ) ) {
109							self._checkTotalRendered();
110							classie.add( el, 'shown' );
111						}
112					} );
113
114					// animate on scroll the items inside the viewport
115					window.addEventListener( 'scroll', function() {
116						self._onScrollFn();
117					}, false );
118					window.addEventListener( 'resize', function() {
119						self._resizeHandler();
120					}, false );
121				}
122
123			});
124		},
125		_onScrollFn : function() {
126			var self = this;
127			if( !this.didScroll ) {
128				this.didScroll = true;
129				setTimeout( function() { self._scrollPage(); }, 60 );
130			}
131		},
132		_scrollPage : function() {
133			var self = this;
134			this.items.forEach( function( el, i ) {
135				if( !classie.has( el, 'shown' ) && !classie.has( el, 'animate' ) && inViewport( el, self.options.viewportFactor ) ) {
136					setTimeout( function() {
137						var perspY = scrollY() + getViewportH() / 2;
138						self.el.style.WebkitPerspectiveOrigin = '50% ' + perspY + 'px';
139						self.el.style.MozPerspectiveOrigin = '50% ' + perspY + 'px';
140						self.el.style.perspectiveOrigin = '50% ' + perspY + 'px';
141
142						self._checkTotalRendered();
143
144						if( self.options.minDuration && self.options.maxDuration ) {
145							var randDuration = ( Math.random() * ( self.options.maxDuration - self.options.minDuration ) + self.options.minDuration ) + 's';
146							el.style.WebkitAnimationDuration = randDuration;
147							el.style.MozAnimationDuration = randDuration;
148							el.style.animationDuration = randDuration;
149						}
150						
151						classie.add( el, 'animate' );
152					}, 25 );
153				}
154			});
155			this.didScroll = false;
156		},
157		_resizeHandler : function() {
158			var self = this;
159			function delayed() {
160				self._scrollPage();
161				self.resizeTimeout = null;
162			}
163			if ( this.resizeTimeout ) {
164				clearTimeout( this.resizeTimeout );
165			}
166			this.resizeTimeout = setTimeout( delayed, 1000 );
167		},
168		_checkTotalRendered : function() {
169			++this.itemsRenderedCount;
170			if( this.itemsRenderedCount === this.itemsCount ) {
171				window.removeEventListener( 'scroll', this._onScrollFn );
172			}
173		}
174	}
175
176	// add to global namespace
177	window.AnimOnScroll = AnimOnScroll;
178
179} )( window );