How to use scrollRevealJS alongside AnimateCSS?

Question

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

score 2 · Accepted Answer · edited Jul 09 '15 at 03:21

2

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.

edited Jul 09 '15 at 03:21

Nolan Amy

10,785
5
34
45

answered Jul 07 '15 at 02:49

HARDIK SHAH

163
1
14

Yes, I've tried WOW.js, but it not having the reset option is the exact reason why I moved away from it. – Ralph David Abernathy Jul 07 '15 at 12:06
Did you manage to get ScrollRevealJS and AnimateCSS working together to reset the animations on scroll? – Andrés Liu Aug 13 '18 at 18:24

How to use scrollRevealJS alongside AnimateCSS?

1 Answers1