Search code examples
cssanimationscrollanimate.cssscrollreveal.js

How to use scrollRevealJS alongside AnimateCSS?

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; }

Solution

  • 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.