Make your website interactive using Velocity.js

Overview of Velocity JS

Velocity is an animation engine with the same API as jQuery’s $.animate(). It works with and without jQuery. It’s incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined.

Compatibility of Velocity JS

Velocity works everywhere — back to IE8 and Android 2.3. Under the hood, it mimics jQuery’s $.queue(), and thus interoperates seamlessly with jQuery’s $.animate(), $.fade(), and $.delay(). Since Velocity’s syntax is identical to $.animate(), your code doesn’t need to change.

Now, that you have an idea of what is Velocity.js. Let’s get started with it.

Reversing

To animate an element back to the values prior to its last Velocity call, pass in “reverse” as Velocity’s first argument.

Reverse defaults to the options (duration, easing, etc.) used in the element’s previous Velocity call. However, this can be overridden by passing in a new options object:

Output

Scrolling

To scroll the browser to the top edge of an element, pass in “scroll” as Velocity’s first argument (instead of a properties map). The scroll command behaves identically to a standard Velocity call; it can take options and it can be queued.