An Introduction to Website Animation with Velocity.js

Have you tried adding animation to your websites? Introducing motion can delight users, and more importantly, it can be used to provide affordance to information on the page. This post walks you through your first animation, including how to set up your webpage and how to animate a list.

See the Pen Animation Example with Velocity – Main by bryan (@elkusbry) on CodePen.

You can find my full Animation Example with Velocity – Main on CodePen, but I’ll walk you through the details below.

What We Will Use to Make Our Animations

jQuery
Velocity.js
Velocity.js UI Pack

Setting Up

The first thing we want to do is include the JavaScript files in our page. This is done by adding the following to your page inside a script tag. You can choose to host the files yourself or via a CDN. For this example, I included these three files in order via the CDN Links below:

//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js

https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js

Below is an example of how it might look if you add the scripts inside your HTML file versus using a site like CodePen:

(You can learn more about including jQuery and JavaScript files here.)

Now, after reloading the page, you should be able to inspect it via the development tools in your browser to make sure that the three files were loaded.

Preparing the Code

We need to wait until the page loads before we can execute the animations. The following jQuery code will do this for us. It waits for the DOM elements to load before executing the code inside the function. In this case, the code will print “ready!” inside the console.

$( document ).ready(function() {
    console.log( "ready!" );
});

(Read more about jQuery’s document ready here.)

This code can be added to the HTML page inside a script tag or by including a custom JavaScript file. If it loaded properly, “ready!” should appear in the web browser’s console.

Starting to Animate

Before we can start animating, we need to tell the code which element(s) in the DOM to animate. I typically leverage jQuery to accomplish this. jQuery will search the DOM elements to find the desired element. This is usually done by using selectors like IDs or classes. So let’s use the code below to tell jQuery to select all the lis on the page.

$("li");

This code selects all the li elements but doesn’t manipulate them, so it’s hard to tell if it really works. To test it, we can output the selections to the console. In the example below, we will select all the li tags on the page and output them to the console.

console.log( $("li") );

In the console, you should see an object listing all the li tags you have selected via the jQuery call.

Creating the Animation

Now that we have the tough part out of the way, it’s time to have some fun animating the DOM elements! You have two options using Velocity; you can create custom animations that manipulate CSS, or you can use the Velocity UI pack. The UI pack has predefined animations for easy implementation. For simplicity’s sake, we will use that and demonstrate it on a list of elements.

Let’s add the Velocity code to the jQuery selection we previously made. To select an animation, I went to the Velocity documentation and tested out which animation to use. For this example, we will use “transition.slideLeftIn”.

$("li").velocity("transition.slideLeftIn");

Polishing your Animation

Velocity gives us two options to tighten up our animations: Drag and Stagger. Using these options in your animations can offer a more fluid and natural feel, especially when animating multiple elements.

Drag alters the duration of each element’s animation in a sequence, which speeds up each of the items, starting from the last item. This animates each element sequentially, instead of animating all the lis at once.

Stagger gives you the option to animate all items at the same time or individually with a set duration between element animations.

$("li").velocity("transition.slideLeftIn", { stagger: 250, drag: true });

In the example below, we animate one list with Stagger and Drag and one without. As you may notice, the lis in the left list all animate in at once, while the lis in the right list flow in nicely. It gives a sense of order and a feeling that the block of content is made up of individual components.

See the Pen Animation Example with Velocity by bryan (@elkusbry) on CodePen.

Endless Possibilities

By now, you have hopefully learned to create your first animation. It’s okay to be choosy about how and when you decide to implement animations, as they can quickly become cheesy and distracting. However, if used correctly, they can bring a nice level of polish to your work. With the combination of selecting elements from the DOM and the immense options to transition CSS attributes, there are endless possibilities for creative animations.