Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Scroll-based animations with WOW.js

Wednesday, March 29th, 2017 by Servage

wowjsMany websites have animations that trigger when you scroll enough to make the element visible. Today we will see how this works and how you can implement similar animations on your own website using an easy-to-use WOW.js JavaScript library together with ready-made animations from Animate.css.

Getting the Required Files

Since we are going to use both WOW.js and Animate.css libraries, we have to download and include them in an HTML file. Let’s start with downloading Animate.css, but first a quick introduction to the library. As the name suggests, Animate.css is an animation library built with only CSS. It allows you to animate elements using fading, sliding and many other types of animations. You can download the library from daneden.github.io/animate.css or if you want to use a direct link instead of a local file, you can use a link from a CDN provider such as www.cdnjs.com.

Once you have Animate.css included in your HTML page using the <link> tag, it is time to include WOW.js itself. You can get the JavaScript file from mynameismatthieu.com/WOW. Download the .js file and include it at the end of your <body> tag. It should be noted that WOW.js is free for non-commercial projects and a license should be purchased for commercial use.

Initializing the Plugin

Now that you have the required files, it is time to initialize the plugin. What this essentially means is enabling animations on all elements that are marked as animatable. We will do the marking process in the next step. To initialize WOW.js, use the following code inside a <script> tag after the line where you included the two libraries: new WOW().init().

Animating Elements

In this step we are going to mark elements as animatable. This is a very simple process: simply add a CSS class called “wow” to the element, for example: <div class=”wow”></div>. This will make WOW.js constantly check the web browser’s scroll position and play the chosen animation from Animate.css when the element becomes visible.

Speaking of which, the last step is to choose what animation to play when the event occurs. If you go back to the official Animate.css website, you can find a list of all available animations that you can use. In this example, we will use a basic fade-in animation. The process of adding the chosen animation to an element is similar to what we have already done with WOW.js. It works by adding a CSS class to the same element. The class name of the fade-in animation we are going to use is called “fadeIn”, and it can be applied to an element like this: <div class=”wow fadeIn”></div>.

This is all there is to making scroll-based animations with WOW.js and Animate.css. Go ahead and explore all the possible animations that come with Animate.css to build something great!

Scroll-based animations with WOW.js, 5.0 out of 5 based on 2 ratings
Categories: Guides & Tutorials

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.