Velocity (JavaScript library)

Velocity supports all major desktop browsers (Firefox, Google Chrome, and Safari) plus the iOS and Android mobile operating systems. Its support extends as far back as Internet Explorer 8 and Android 2.3.[16]

The Velocity library is a single JavaScript file containing all of its core functions. It can be included within a web page by linking to a local copy or to one of the many copies available from public servers, including MaxCDN's jsDelivr or Cloudflare's cdnjs.

<script src="velocity.min.js"></script>

It is also possible to include Velocity directly from content delivery networks. (The integrity attribute is used for Subresource Integrity.) It is recommended to always use HTTPS for resources but this can be replaced with // to make use of protocol relative URLs.

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/2.0.5/velocity.min.js" integrity="sha256-NtPQd/Jy7Ze2E72YS8WJDGMu6xFYomLYibE0hpyLTjs=" crossorigin="anonymous"></script>

Velocity has two usage styles:

• The $.Velocity function, which is a factory method extended from the jQuery root object. This method animates raw DOM elements instead of jQuery-wrapped elements. This is the style employed when using Velocity without jQuery on the page.
• The $element.velocity() function. This is the style used for animating jQuery element objects when jQuery is present on the page.

Animation calls in Velocity consist of supplying the desired element(s) to animate, an animation property map to specify the CSS properties to be animated, and an optional options object to specify animation settings (e.g. duration).

Velocity accepts one or more arguments. The first argument, which is required, can either be the name of a predefined Velocity command (e.g. scroll or reverse) or an object consisting of CSS properties to be animated:

// Animate an element's width to 100px and its left property to 200px
$element.velocity({ width: "100px", left: "200px" });

The second argument, which is optional, is an object. It is used to specify animation options such as duration, easing, and complete (an arbitrary function to execute once the animation has completed):

// Animate an element's width to 100px over a 1000ms duration after pausing for a 100s delay.
$element.velocity({ width: "100px" }, { duration: 1000, delay: 100 });

Creating a series of consecutive animation calls in Velocity consists of placing velocity() calls back-to-back on the target jQuery element object:

$element
    .velocity({ height: 300 }, { duration: 1000 })
    // Continue on to this animation once the previous one has completed
    .velocity({ top: 200 }, { duration: 600 })
   // And once more...
    .velocity({ opacity: 0 }, { duration: 200 });

Scrolling in Velocity consists of passing in "scroll" as Velocity's first argument — in place of the typical CSS properties map:

// Scroll with a duration of 750 ms
$element.velocity("scroll", { duration: 750 });

The browser will subsequently scroll down to the top edge of the element that Velocity was invoked on.

Animation reversal in Velocity consists of passing in "reverse" as Velocity's first argument:

// Animate an element's height
$element.velocity({ height: "500px" }, { duration: 500 });
// Reverse the previous animation; animate back to the element's original height using the previous duration
$element.velocity("reverse");

Velocity's reverse command defaults to the animation options used in the prior call. Passing in a new options object extends the previous one:

$element.velocity({ height: "500px" }, { duration: 500 });
// Extend the previous reverse call's options object with a new duration value
$element.velocity("reverse", { duration: 1000 });