Update

Velocity has reached 1.0.0. Three important changes have occurred:

jquery.velocity.js has been renamed to velocity.js since Velocity no longer requires jQuery to function. If you are still using jQuery with Velocity, you do not need to change anything in your code; Velocity will behave exactly as it always has. Two backwards-incompatible changes have been made: 1) When accessing element(s) passed into the begin/complete/progress/promise callbacks, you must iterate through them (e.g. via $.each() or .forEach()) since they are now wrapped inside an array before being passed through. 2) The back, bounce, and elastic easings have been removed. Use spring physics instead. If you're using module loaders, such as RequireJS and Browserify, read the end of this section to learn how to newly load Velocity.

Using Velocity with jQuery

Velocity.js works seamlessly with jQuery; jQuery's $.animate(), $.delay(), and $.fade() functions can be used alongside Velocity. There is no performance degradation from using Velocity with jQuery.

Note that you can offset Velocity's file size by custom-building jQuery without its effects module (see jQuery on GitHub), which Velocity does not rely on. When excluding that module, remember that you can no longer use jQuery's own animation functions.

Browser support: Back to IE8 and Android 2.3. Below IE8, Velocity avoids loading, and aliases itself to jQuery's $.animate().

Using Velocity without jQuery

Velocity.js also works when jQuery is not loaded on your page. Using Velocity without jQuery removes support for IE8, making IE9 the new minimum supported version of IE.

If Zepto is present on the page, Velocity.js works with Zepto identically to how it works with jQuery; all of the documentation examples on this page equally apply.

When neither jQuery nor Zepto are present on the page, Velocity attaches itself to the window object. In this configuration, animations are triggered via Velocity's utility function, with which raw DOM elements are passed in as Velocity's first parameter:

Velocity(document.getElementById("dummy"), { opacity: 0.5 }, { duration: 1000 });

Similarly, keep in mind that the code examples on this page that demonstrate accessing the core Velocity object on jQuery's $ must be rewritten to access the global Velocity object instead. In short, $.Velocity now becomes Velocity .

Further, when using velocity.js without jQuery and Zepto, you inherently no longer have access to the $.queue() and $.delay() functions provided to you by those libraries. Accordingly, you'll want to delegate custom queued logic to Velocity's begin and complete callbacks, and you'll want to use Velocity's delay option for triggering delays.

For a detailed walkthrough on animating without jQuery, read the article.

Module Loader: RequireJS

1) If you're using Velocity with jQuery, shim jQuery as a dependency of Velocity. For the Velocity UI pack (optional), shim Velocity as a dependency of the UI pack.

(Keep in mind that jQuery must be global when using RequireJS with jQuery plugins; you cannot use jQuery.noConflict().)

require.config({ [tab]paths: { [tab][tab]"jquery": "/path/to/jquery-x.x.x", [tab][tab]"velocity": "path/to/velocity", [tab][tab]// Optional, if you're using the UI pack: [tab][tab]"velocity-ui": "path/to/velocity.ui" [tab]}, [tab]shim: { [tab][tab]"velocity": { [tab][tab][tab]deps: [ "jquery" ] [tab][tab]}, [tab][tab]// Optional, if you're using the UI pack: [tab][tab]"velocity-ui": { [tab][tab][tab]deps: [ "velocity" ] [tab][tab]} [tab]} }); require([ "jquery", "velocity", "velocity-ui" ], function ($, Velocity) { [tab]/* Your app code here. */ [tab]$("body").velocity({ opacity: 0.5 }); });

2) If you're using RequireJS to load Velocity with Zepto, replace "jquery" mentions with "zepto" in the configuration example above. (Tip: Zepto isn't natively compatible with module loaders, so you'll need to manually assign var $ = window.Zepto inside your RequireJS callback to populate the $ variable for usage.)

3) If you're using Velocity by itself (as in, without jQuery or Zepto), simply require Velocity as normal (without any shimmed dependencies) and animate via the utility function as described in the Using Velocity without jQuery section above.

Module Loader: Browserify

If you're using Velocity with jQuery, you must require jQuery before Velocity, and you must assign jQuery globally on the window object:

window.jQuery = window.$ = require("path/to/jquery-x.x.x.js"); require("path/to/velocity.js"); // Optional: If you're using the UI pack, require it after Velocity. (You don't need to assign it to a variable.) require("path/to/velocity.ui.js"); /* Your app code here. */ $("body").velocity({ opacity: 0.5 });

If you're using Velocity without jQuery, simply require Velocity as normal: