search

thenikso / angular-inview

AngularJS directive to check if a DOM element is in the browser viewport.
http://thenikso.github.io/angular-inview/
MIT License
480 stars 112 forks source link

Combine with animate.css or nganimate #64

Closed josoroma-zz closed 9 years ago

josoroma-zz commented 9 years ago

it is possible to use this module with animate.css or nganimate to produce a fade to the element ".text-headline"?

<h1 in-view="inviewHandler($inview, 'text-headline')" class="text-headline">Hola</h1>

Thanks in advance.

thenikso commented 9 years ago

You can use this with angular animate. Assuming you have the animation on the class i-am-in-view:

<h1 in-view="thisIsInView = $inview" ng-class="{ 'i-am-in-view':thisIsInView }">Hola</h1>
josoroma-zz commented 9 years ago

Great, thanks!

matewilk commented 8 years ago

Just for the record, for some reason it doesn't play well with Animate.css and when you inview, the animated element blinks (shows up) for a millisecond and than starts the animation as suppose to. It's not angular-inview bug, and by writing the animation myself it works like a charm.