Better Animation with .velocity() in Place of jQuery.animate()

Velocity is a new animation engine that can be used with jQuery to accelerate the speed of animations. It optimizes the animation process by minimizing layout thrashing and DOM querying. As a result, you get much better performance on your animations when compared to using the jQuery $.animate() method.

The First Step: Download and Include Velocity

To use Velocity, go to the Velocity site and download the latest version. Once you have Veolocity, you can include it as you would other JavaScript libraries. Simply add it in after including jQuery, for example:

<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="velocity.min.js"></script>

Use velocity() in Place of animate()

Now that you have Velocity included, you can use it by simply replacing any calls you would normally make to jQuery's animate() method with a call to velocity(). The call is otherwise the same as animate(), so you can use the familiar jQuery syntax the rest of the way.

For example, if you had the following jQuery code:

$('#element').animate({
   left: '+=50'
}, 1000);

You could simply replace it with the following to use Velocity:

$('#element').velocity({
   left: '+=50'
}, 1000);

Both will produce the same animation, but Velocity will have an optimized animation.

Test Out the Speed Enhancement

To see the speed difference, we need an example that will push the browser a bit. The example below animates a large number of elements. We will perform the animation with jQuery first, and then do the same animation with Velocity.

Initial Code

The code we will use creates a div element that can be clicked to animate a small square. However, what appears to be a single square is instead 1500 div elements stacked on top of one another. Animating all of these at once will test the performance of both animation systems. The code is shown below:


  <p>
   <a id="click-me" href="#">Click here</a> 
</p>
<div id="jq-anim" style="position:relative; height: 100px;"></div>

<script>

  $(document).ready(function(){
   for (var i = 0; i < 1500; i++) {
      $('#jq-anim').append('<div style="position:absolute; left:0; top:0; width:100px; height:100px; background:#009;"></div>');
   }
   
   $( '#click-me' ).click(function() {
      $('#jq-anim div').animate({
         left: "+=200"
      }, 1000);
   });
});
  
</script>

The code creates a link element (#click-me) and a div element that will act as the container for the stacked squares (#my-anim).

The jQuery code then creates 1500 of the square div elements by appending them within the my-anim element. The CSS takes care of how the elements are displayed, giving the squares a size and color. Whenever the #click-me link is clicked, all div elements in #my-anim are moved 200 pixels to the right.

jQuery Example

First let's look at how this performs using jQuery's animate() method. Click below to animate the stacked squares and see the result.

See the Pen GtJlu .

Notice any "jumping" or lack of smoothness in the animation? Perhaps this expereince could be improved using velocity() in place of animate().

Velocity Example

If you simply replace animate with velocity in the previous code, the element will be animated using Velocity. Click below to animate the stacked squares again:

See the Pen HEhnf .

The animation now operates very smoothly, without hangups or "jumping". As you can see, this is an animation engine that is well worth having if you have a project that requires a lot of animation. As a bonus, if you were already using the jQuery animate() method and want to use Velocity instead, making the change is as simple as changing the function names the way you did in this example!

by John Pollock

John Pollock is a front end developer and author. He runs a web site devoted to front end development called Script the Web.

Tags: javascript , jQuery , performance , Tech Tips