Besties! Animate.css & Wow.js

Do you want to enable some cool animations when people scroll through your React App but you don’t know how to implement that? The answer is simple. Animate.css & Wow.js

Wow.js is very friendly with Animate.css. Installing wow.js takes only seconds.

Advantages

• Smaller than other JavaScript parallax plugins.
• Super simple to install, and works with animate.css, so if you already use it, that will be very fast to setup
• Fast execution and lightweight code: the browser will love it!

Setup Wow.js

1. Link to the CSS Animation Library

Link to Animate.css

<link rel="stylesheet" href="css/animate.css">

2. Link and activate wow.js

<script src="js/wow.min.js"></script>
<script> new WOW().init(); </script>

Reveal CSS Animations

1. Make an element revealable.

Add the CSS class .wow to a HTML element: it will be invisible until the user scrolls to reveal it.

<div class="wow">
 Content to Reveal Here
</div>

2. Choose the animation style

Pick an animation style in Animate.css , then add the CSS class to the HTML element

<div class="wow bounceInUp">
 Content to Reveal Here
</div>

And you’re done! Simple, right?

You can choose from the numerous animation styles available at Animate.css and you can check on the Wow.js documentation to know more about using Wow.js.

Cheers!