Faster JavaScript animations with VelocityJS

Who says JavaScript animation is dead? VelocityJS replaces jQuery's $.animate and performs even better than CSS animations.

If you're looking for proof of concept, look no further than @legomushroom's CodePen demo which combines VelocityJS with a series of SVGs for a stunning result. Seriously, go check it out. The demo is smoother than any Flash video I've ever seen.

What exactly is VelocityJS? From the project page:

Velocity is a jQuery plugin that re-implements $.animate() to produce significantly greater performance (making Velocity also faster than CSS animation libraries) while including new features to improve UI animation workflow.

Since it's backwards compatible with jQuery's built-in animations functions, you can just swap out $.animation with $.velocity and instantly see faster and smoother animations. At only 9kb, it's worth including if you're doing any heavy animation in your web app.

But if JavaScript animations are slow, how does VelocityJS make it fast? The secret sauce, according to their website:

JavaScript and jQuery are falsely conflated. JavaScript animation, which Velocity uses, is fast; it's jQuery that's slow. Although Velocity is a jQuery plugin, it uses its own animation stack that delivers its performance through two underlying design principles: 1) synchronize the DOM → tween stack to minimize layout thrashing, and 2) cache values to minimize the occurrence of DOM querying.

These are exciting times for the web. I wonder how long it will take CSS animations to get up to speed with VelocityJS.

Author avatar

About the author

Creator of Surreal CMS and other web things. Follow me for tweets about JavaScript, CSS, and web programming.