How to set up WOW JS for scrolling animations

WOW.js for scrolling animations

In this article we show you how to set up WOW JS for scrolling animations. To create scrolling animations of a website, you just need two components. WOW.js and Animate.css – By including these two files in a project, it is possible to reveal animations when users scroll down the page. You can easily customise animation settings: style, delay, length, offset, iterations using Animate.css if required.

WOW.js for scrolling animations

Step 1 – Get WOW.js

Matt has a website with documentation and licensing information here: http://mynameismatthieu.com/WOW/ – Remember if you are using the script on a professional project, you will need to buy a licence. Students are able to use the script for free on non commercial projects. There are several ways to add the WOW javascript, but we are going to include the file into our project.

Download the script file below:

WOW.js (211 downloads)

Step 2 – Get Animate.css

Animate.css is a CSS animation library that has been developed by Daniel Eden and can been found at the following website: https://daneden.github.io/animate.css/ – It allows designers to add animations to text, images and layout sections of a website. The library works by using CSS3 animations, transitions and transformations. The animations have been prewritten but can be customised with HTML when writing the classes they affect. There are several ways to add the Animate.css, but we are going to include the file into our project.

Download the CSS file below:

Animate.css (115 downloads)

Step 3 – Putting it all together

Link to the CSS animation library

Link and activate WOW.js

How to set up WOW JS for scrolling animations

The video tutorial below demonstrates how to set up and test animations on your website using WOW JS for scrolling animations. The tendency is to add too many animations to web pages once you have the ability. Try to add the animations sparingly, imagine they are chilly powder and you are a chef – use with caution because you may spoil the dish by adding too much spice!

A full list of animations, can be seen on the following page: https://daneden.github.io/animate.css/

Here is a link to the website showcased in the video tutorial

* The video below shows me adding the JavaScript in the HEAD section of the HTML document which does work. But, after some testing, I discovered the animations ran better when I added the JavaScript link in the footer.

Leave a Reply

Your email address will not be published.

XL Websites

XL Websites