1. Web Design
  2. Velocity.js

Silky Smooth Web Animation with Velocity.js


Animation, when thoughtfully applied, can improve website interfaces and, ultimately, the user experience of a website. In this tutorial, we are going to look into VelocityJS, a JavaScript animation engine for fast performance animations. VelocityJS has become one of my preferences when dealing with animation on the web, the reasons being, in my opinion:

  • It’s quite simply better. VelocityJS is as fast as CSS and delivers better performance than its jQuery counterpart—particularly on mobile devices. This performance is so much better that there was even a discussion to replace jQuery’s core animation with VelocityJS—something which, unfortunately, won’t happen. CSS animation, though fast, is limited in terms of browser support. VelocityJS is reliable as far back as IE8!
  • RunSequence FTWRunSequence is a method in VelocityJS that we can use to perform stacks of animation consecutively. It is a more elegant approach than chaining animation functions, like in jQuery. Doing this solely with CSS is impractical.
  • Lean learning curve. VelocityJS provides similar syntax to jQuery. This allows us to jump from jQuery to VelocityJS and grasp the API quickly.

In this tutorial we’ll walk through the essentials for carrying out animations with VelocityJS. We’ll also highlight a few features that could improve our UI design. So, let’s make a start!

Running Basic Animations

With jQuery, assuming we would like to slide a div to the right, we would write something like:

In almost exactly the same way, we would write it like this with VelocityJS:

Both examples will move the div by 500px to the right for three seconds by observing the element left property. The visible difference in the syntax is the method use to animate the element, VelocityJS uses .velocity() instead of jQuery’s .animate()

You may also notice the performance discrepancy. jQuery animation sometimes feels kind of shaky, whereas VelocityJS runs like butter from start to finish. Give it a go:

Animating Different CSS Properties

VelocityJS accepts a number of CSS properties as well as their long-hand version to manipulate the element. We can use these properties together in a single VelocityJS instance to perform sophisticated animation. For example:

In this second example, we’ve treated the div with several CSS properties, including width to make it smaller, background-colorpaddingbox-shadow, and border-radius to transform it into a circle.

Notice that the properties comprising two or more words are formatted in camelCase format, following JavaScript naming convention, hence border-radius becomes borderRadius and so forth. We also speed-up the duration to just 350 milliseconds and, this time, we opt for easeInQuad as VelocityJS has jQuery UI's easing built-in.

Animation Shortcuts

jQuery provides a few methods for performing common animations, such as .slideUp() and .fadeOut(), which make elements disappear gradually. So it comes as no surprise that VelocityJS does too. VelocityJS provides a few shortcuts to pass into a .VelocityJS() instance.

We would write the following to slide up an element to conceal the content:

To fade it out, we would write:


VelocityJS also provides a shortcut called scroll which might come in handy for creating links that lead to a particular section on the page. The following code assumes that we want the link, #go-up, to scroll back to the of the top of the page when clicked.

Here’s what that might look like:


Another handy shortcut included comes in the form of reverse. This shortcut allows us to revert the element back to its initial state once the animation is complete. Taking the previous scrolling example, we can apply reverse to enhance the arrow icons. To do so, we chain a new VelocityJS instance with reverse added, setting the loop option to true.

This will move the icon down by 10px then immediately back to its initial position. As we’ve also set the loop option to true the animation will perform indefinitely.

Plugin: UI Pack

More animation effects are available in UI Pack. The UI Pack is available as a plugin, separately from the VelocityJS core. Once you've included it, you will have access to an array of effects beyond slideUpfadeOut, and scroll opening up even greater potential for building lively interfaces.

UI Pack also brings two new options: stagger and drag. The stagger allows us to perform a single effect, applied to an array of elements sequentially instead of simultaneously. The drag option, when set to true, gives a sense of dragging for the last element in the array.

As an example, I've created a navigation bar with a few menus, one of which has a sub-menu. To make the sub-menu more engaging, I’ve applied two effects from the UI Pack with the stagger option set.

Multiple Animations Sequentially

At some point, we may need to perform animations on different elements in sequence. To do so, we have to nest each VelocityJS instance in order, for example:

The above function will first perform the animation of the $body, then $nav once it is complete, and lastly the $menu. Unfortunately, this is not an elegant approach, nor ideal. If you have dozen of animations, the code would be impractical to manage.

However, in addition to animation effects, the UI Pack comes with a method called RunSequence. This is designed precisely to solve our sequencing issues; to stack animations neatly and execute them in their relevant order. Taking the above code, we could rewrite it as a JavaScript object with the selected element defined within an e property, the CSS properties listed in a p property, while the animation options are set in the o property.

I’ve extended the above code into a functioning off-canvas layout. Give it ago, and check out the JavaScript tab to see the full source code.fffffff

Final Thought

I find VelocityJS to be a preferable alternative to jQuery and CSS animation, particularly when it comes to building interactive interfaces which involve multiple animations. VelocityJS is easy to use, packed with pre-built animations, and above all, it is fast. Use it responsibly. As is often said: with great features come great responsibility.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.