I love both the scrollRevealJS and AnimateCSS libraries for animations, however, I would like to use them both on one element. For example, I have a div <div class="animated fadeInDown" data-sr='enter top reset'>Lorem Ipsum</div>
. For some reason, adding the Animate CSS classes animated fadeInDown
ignores scrollReveal's data attribute. How am I able to use both the classes and data attributes of both libraries?
EDIT: I forgot to mention that I have the following style applied:
[data-sr] { visibility: hidden; }
The ScrollRevealJS library does not provide default functionality to work with AnimateCss. Instead of ScrollRevealJS you can use Wow.js library – it works with AnimateCss. The problem with Wow.js is that a reset option is not available.