Velocity (JavaScript library)

Velocity is a cross-platform JavaScript library designed to simplify the client-side scripting of website animation.^[4] Velocity is free, open-source software licensed under the MIT License.^[3] It is the most popular open source web animation engine.^[5]

Velocity's syntax is designed to make it easier to create complex animations for HTML and SVG elements.^[6] In addition to its workflow benefits, Velocity provides animation performance that is competitive with CSS-based animation.^[7] Velocity achieves its performance by maintaining an internal cache of animation states and minimizing "layout thrashing," the undesirable behavior that web browsers undergo when visually updating at a fast rate.^[7] Altogether, its workflow and performance benefits allow Velocity to be used for sophisticated animation programming that can be integrated into both web and mobile applications.^[8] Its broad browser and device support make it ideal for large enterprise distributions that must support low-powered devices.^[9]

Velocity is used to power the user interfaces of many notable websites, including those of Uber, Samsung, WhatsApp, Tumblr, HTC, Mazda, and Microsoft Windows.^[10] It is one of the most favorited projects on the code hosting service GitHub.^[11] In 2015, Velocity was nominated for Open Source Project of the Year by The Net Awards.^[12]

Features

Velocity's features include:^[4]

• Browser window and element scrolling
• Independence from the jQuery framework^[13]
• Animation reversal (the ability to undo the previous animation) and animation looping
• SVG element animation^[14]
• RGB and hex color animation
• CSS's transform property animation
• Pre-created animation effects via Velocity's UI Pack^[15]
• Physics-based motion via the spring easing type
• Promises integration

Browser support

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]

Usage

Including the library

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 link starting with // is protocol relative URL.)

<script src="//cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js"></script>

Usage styles

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).

Arguments

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 });

Chaining

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 and Reversal

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 750ms
$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 });

History

Velocity was developed by Julian Shapiro to address a lack of performant and designer-oriented JavaScript animation libraries.^[17][18] Stripe, a popular web developer-focused Internet technology company sponsored Shapiro on a grant to help provide the financial resources necessary to continue full-time development on Velocity.^[19]

The high performance of Velocity's internal animation engine helped to repopularize JavaScript-based web animation, which had previously fallen out of favor for CSS-based animation due to its speed advantages over older JavaScript libraries that lacked a focus on animation.^[20]

In September 2014, Shapiro released Velocity Motion Designer, a tool for designing animations on live production websites that allowed for real-time exporting of the generated animation code for subsequent use within an IDE.^[21] In March 2015, Peachpit published Shapiro's Web Animation using JavaScript book, which teaches both the beginning and advanced principles of developing web animations using Velocity.^[22] As of mid-2015, Velocity continues to be developed and maintained exclusively by Shapiro.^[23]

In addition to Velocity's use in professional enterprise environments, it is also widely used for web development experimentation and beginner practicing. Proof-of-concept web development projects built on top of Velocity are commonly posted to CodePen (example), a leading community code sharing service.

See also

• D3.js
• Raphaël
• Three.js
• jQuery

Further reading

• Web Animation using JavaScript
• Animating without jQuery
• How to use Velocity to easily add animations
• Fast UI animation using Velocity.js

External links

• Official website
• Velocity demo gallery

References