Using WOW.js and Animate.css for Scroll-Triggered Animations

WOW.js and Animate.css

Animations are a great way to add visual excitement and motion to your websites, and the popular animate.css library has provided an easy way to add CSS-based animations to any website. What if you want to only trigger these animations once the user has scrolled to a specific section of your website, though? This can of course be accomplished via jQuery, but using the JavaScript library for that function alone adds unnecessary bulk for a function that can otherwise be accomplished by a simple script. WOW.js solves this problem, offering an easy-to-use library for adding animations triggering by scrolling, with no jQuery required, in only 3kB. This post will give a guide on adding WOW.js (and animate.css) to your web project, and some of the various options available for it.

Adding animate.css and WOW.js to your project

The first step is to add animate.css and WOW.js to your HTML document.

You can download the distribution for animate.css and WOW.js from each of their respective official sites, or simply link to the files available from CDN cdnjs.com:

<!– animate.css Non-minified Version –>
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css

<!– animate.css Minified Version –>
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css

<!– WOW.js Non-Minified Version –>
https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js

<!– WOW.js Minified Version –>
https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js

Using npm to install animate.css and WOW.js

Alternatively, you can use a package manager such as npm to install both. From the root of your project directory, run the following command from the CLI:

npm install wowjs

One benefit of installing WOW.js via npm is that it automatically also installs animate.css as a dependency.

Whichever method you choose, animate.css will be linked in the <head> of your document (your href path may vary):

<link rel=“stylesheet” href=“node_modules/animate.css/animate.css”>

And add WOW.js to the bottom of your document, just below the closing </body> tag, followed by a <script> to initialize WOW.js:

<script src=“node_modules/wowjs/dist/wow.min.js”></script>
<script>
new WOW().init();
</script>

Note that you can use another CSS animation library, such as CSShake, WOW.js just uses animate.css as its default.

Adding animations to elements

Once both files are added to the project, it’s time to select elements that you’d like to animate upon scrolling.

Add a class of .wow to any HTML element you’d like to animate with WOW.js, such as an h1 element:

<h1 class=“wow”>Welcome to my site!</h1>

Any element with a class of .wow will remain hidden until the user reaches it on the page.

Animate.css has 75 different animation styles to choose from, all of which can be demoed on the official site. Once you’ve selected an animation you’d like to use, add its name (for example, fadeInRight) as a CSS class on the element to animate:

<h1 class=“wow fadeInRight”>Welcome to my site!</h1>

And that’s it! The h1 element will now fade in right once the user has scrolled to it on the page.

WOW.js is free to use for open source project, although requires purchase of a license for any commercial projects.

 

Resources

Post a Comment

Comments are moderated. Your email is kept private. Required fields are marked *

© 2018 Sunlight Media LLC - Web Design Company