title: Why am I getting 'Cannot read property 'length' of null' in this js code?
body: <p>I am trying to integrate this example <a href="http://tympanus.net/codrops/2013/07/02/loading-effects-for-grid-items-with-css-animations/comment-page-3/#comments" rel="nofollow">http://tympanus.net/codrops/2013/07/02/loading-effects-for-grid-items-with-css-animations/comment-page-3/#comments</a> with my own website.  </p>
  
  <p>Basically I'm trying to use masonry.js, (which I have working on it's own) with animOnScroll.js to have my images fade in. </p>
  
  <pre><code>&lt;script src="AnimOnScroll.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        new AnimOnScroll( document.getElementById( '.container' ), {
          minDuration : 0.4,
          maxDuration : 0.7,
          viewportFactor : 0.2
        } );
      &lt;/script&gt;
  </code></pre>
  
  <p>In Chrome console I am getting the following error.</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'length' of nul      imageLoaded.js
  </code></pre>
  
  <p>And here is the code that is highlighted for the error in imageLoaded.js</p>
  
  <pre><code>// turn element or nodeList into an array
  function makeArray( obj ) {
    var ary = [];
    if ( isArray( obj ) ) {
      // use object if already an array
      ary = obj;
    } else if ( typeof obj.length === 'number' ) {
      // convert nodeList to array
      for ( var i=0, len = obj.length; i &lt; len; i++ ) {
        ary.push( obj[i] );
      }
    } else {
      // array of single index
      ary.push( obj );
    }
    return ary;
  }
  </code></pre>
  
  <p>My css structure is like this:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="grid_4"&gt;&lt;/div&gt;
      &lt;div class="grid_4"&gt;&lt;/div&gt;
      &lt;div class="grid_4"&gt;&lt;div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Not really sure where to go with this, do I need to change 'number' to the name of my class?  Very lost, any help would be appreciated</p>