Why are my divs not animating on scroll?

Question

http://codepen.io/donnaloia/pen/IekLw

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/macsupport/pen/eghEm

You can see I have masonry working, but the anim on scroll effect is not working. I've actually been trying to figure this out for a few weeks, and just can't figure out what I've done wrong.

Here is my javascript, the rest of the code is in my codepen link.

   $(document).ready(function() {
      $('.container').imagesLoaded(function() {
      $('.container').masonry({
       itemSelector: '.grid_4',
       isFitWidth: true,
       gutter: 8
      });

      });

    new AnimOnScroll( document.getElementById( '.grid_4' ), {
            minDuration : 0.4,
            maxDuration : 0.7,
            viewportFactor : 0.2
          } );

    });

Answer 1

Here's a forked codepen: http://codepen.io/anon/pen/CotJv

It looks like you have a few issues with your codepen.

1) Your codepen is incomplete. Unlike the jsfiddle you linked to, the codepen does not have all the resources. If you add animOnScroll and the animate CSS (I copied just one from the working fiddle, you may desire another animation), etc. you don't have an error thrown immediately.

2) The animOnScroll.js file referenced on the jsfiddle page handles the imagesLoaded and masonry init internally. If you're going to use that file, I'd recommend allowing animOnScroll.js to continue handling those.

3) The animOnScroll.js file expects a certain DOM tree. Specifically, it wants to see unordered lists (ul and li). If you don't mind hosting the file, you can make the change directly to the file and change those requirements.

All that together, here's a forked codepen that illustrates those changes:

Again, codepen: http://codepen.io/anon/pen/CotJv

I keep your markup, but update the JS to work with it. The specific changes are:

Line 89 (what elements to apply the CSS animate class) :

this.items = Array.prototype.slice.call( document.querySelectorAll( '.grid_4' ) );

Previously:

this.items = Array.prototype.slice.call( document.querySelectorAll( '#' + this.el.id + ' > li' ) );

Line: 100 (initializing Masonry) - Here we hardcode the class name (.grid_4):

itemSelector: '.grid_4',

Previously:

itemSelector: 'li'

Hopefully this helps!