Initial state of divs not in sight is animated, rather than not-visible

Hello Mr. Robert,

Thank you for the great code you've provided here. I managed to get it to work along with my Routes build, but I'm facing a little issue where: when the page loads, elements that are out of sight (to the bottom of the page) have their initial state as "animated x" instead of "not-visible".

I have added class "not-visible" to the elements, but still the animated class persists on page load.

It's interesting to notice that as the page load is firing the animations, if you hit "F5" anywhere on the page, that element will animate in. And also, that if you scroll down on the page, the elements above acquire the "not-visible" class successfully; so, when you scroll back up, they animate in.

I've been banging my head over this issue with no success. Please help! ^.^

My code is at: https://github.com/Wessek/workspace.angular-bootstrap/tree/angular.scroll-animations.