Advanced Patch

- NOTE: This documentation is for Velocity v2.

Advanced: Patch

Although Velocity is capable of being used directly, it is more powerful and simple to use it by chaining from other methods.

There are several ways to gain a collection of elements to animate, and by default Velocity will patch the built in ones such as document.querySelector(...) so that the result from them can be used directly - document.querySelector(...).velocity(...).

Velocity has traditionally been used with jQuery (and it's related cousin Zepto), so it will also patch them in exactly the same way if they exist in the global scope.

If these are loaded after Velocity, or you wish to add this chaining to anything else, then there is an exposed Velocity.patch(object, global) method available. The first argument is the object to be extended, and the second argument is an optional true that tells it to add a capitalised .Velocity instead of a lower case .velocity. This is purely for consistency reasons - if you are chaining then it is assumed that you are chaining from a valid animation target with the lower case form, or must supply the animation target as the first argument with the upper case form.

This is how Velocity itself calls this during initialisation:

Velocity.patch(window, true);
Velocity.patch(Element && Element.prototype);
Velocity.patch(NodeList && NodeList.prototype);
Velocity.patch(HTMLCollection && HTMLCollection.prototype);

Velocity.patch(jQuery, true);
Velocity.patch(jQuery && jQuery.fn);

Velocity.patch(Zepto, true);
Velocity.patch(Zepto && Zepto.fn);