I'm trying to replicate the tympanus demo using masonry and animonscroll.js. the only difference is I'm using div cards with images inside them instead of just images.
Here is the working tympanus demo http://jsfiddle.net/Sfmv9/19/light/
And here is my code: http://codepen.io/anon/pen/CotJv.
For whatever reason this works in codepen, but I am suffering from the following issues on my local machine.
The cards are not animating on scroll
Once in a while the cards load on top of one another (which I'm guessing means imagesLoaded is not doing it's job)
I am receiving:
'Typeerror: Cannot read property 'length' of null imagesloaded.js'
This is the third question I have posted about this issue in the past two months and still cannot figure out why I'm getting this error and how to fix it. I am posting this again (with more specific information) to see if anyone may be able to help.
The error appears to be in this function in imagesloaded.js
// 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 < len; i++ ) {
ary.push( obj[i] );
}
} else {
// array of single index
ary.push( obj );
}
return ary;
}
Per the advice of someone in my previous post, I tried changing obj.length == 'number' to:
if ( obj && typeof obj.length === 'number' )
I've also tried changing my container class to a container id in AnimOnScroll.js among many other attempted solutions, but the error remains. Because I am a little shaky with js, I am not able to trace how AnimOnScroll, ImagesLoaded and Masonry all connect with eachother so I don't know if the problem is in fact ImagesLoaded.js or in AnimOnScroll.js.
What confuses me more than anything is why this would work in codepen but not on my local machine.
And if it helps, here are the links to my previous questions.
Why are my divs not animating on scroll?
Why am I getting 'Cannot read property 'length' of null' in this js code?
Are you, by any chance, calling your script in
<head>?Try putting it just before the closing
</body>tag.