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.
Step 1 – Get WOW.js
Download the script file below:
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:
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