Add class when element is scrolled into view.

[austincondiff]

I would like to animate elements once the user scrolls so new elements in my grid are in view. Adding a class once the user scrolls so that they are in view would satisfy this need. I could always do this myself but it might be a little more efficient if it were handled in angulargrid itself.

[s-yadav]

I feel this should be done as a seperate directive, as it is not directly related to angulargrid. Perhaps something like this.

   App .directive('revealOnScroll', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                var list;
                setTimeout(function () {
                    list = element.children();
                });

                angular.element(window).on('scroll', function () {
                    for (var i = 0; i < list.length; i++) {
                        if (list[i].getBoundingClientRect().top <= window.innerHeight * 0.75 && list[i].getBoundingClientRect().top > 0) {
                            angular.element(list[i]).addClass('reveal-it');
                        }
                    }
                })
            }
        }
    });

CSS for Animation

.dynamic-grid.angular-grid > .grid {
  opacity: 0;
  -webkit-transition: all 800ms ease;
  -moz-transition: all 800ms ease;
  -o-transition: all 800ms ease;
  transition: all 800ms ease;
  -webkit-transform: translateY(200px);
  -moz-transform: translateY(200px);
  -ms-transform: translateY(200px);
  -o-transform: translateY(200px);
  transform: translateY(200px);
}
.dynamic-grid.angular-grid > .grid.reveal-it {
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

You can use reveal-on-scroll directive on the same element where you have applied angular grid.