Chapter 2. Animating with Velocity.js
In this chapter, you’ll learn the features, commands, and options provided by Velocity.js. If
you’re familiar with jQuery-based animation, you already know how to use Velocity; it
functions nearly identically to jQuery’s $.animate() function.
But regardless of your existing knowledge, the methodical feature breakdowns in this
chapter will introduce you to the nuances of animation engine behavior. Mastering these
nuances will help take you from novice to professional. Even if you’re already intimately
familiar with JavaScript animation and Velocity.js, do yourself a favor and skim this
chapter. You’re bound to discover something you didn’t realize you could do.
Types of JavaScript animation libraries
There are many types of JavaScript animation libraries. Some replicate physics
interactions in the browser. Some make WebGL and Canvas animations easier to maintain.
Some focus on SVG animation. Some improve UI animation—this last type is the focus of
this book.
The two popular UI animation libraries are GSAP (download it at GreenSock.com) and
Velocity (download it at VelocityJS.org). You’ll work with Velocity throughout this book
since it’s free under the MIT license (GSAP requires licensing fees depending on a site’s
business model), plus it boasts incredibly powerful features for writing clean and
expressive animation code. It’s in use on many popular sites, including Tumblr, Gap, and
Scribd.
Oh, and it was created by the author of this book!Installing jQuery and Velocity
You can download jQuery from jQuery.com, and Velocity from VelocityJS.org. To use
them on your page—as with any JavaScript library—simply include tags pointing toward the respective libraries before your page’s