Original author(s) Written in JavaScript Platform See Browser support | Development status Active Operating system | |
Stable release 1.4.3 / February 16th, 2017 | ||
Velocity is a cross-platform JavaScript library designed to simplify the client-side scripting of website animation. Velocity is free, open-source software licensed under the MIT License. It is the most popular open source web animation engine.
Contents
- Features
- Browser support
- Including the library
- Usage styles
- Arguments
- Chaining
- Scrolling and Reversal
- History
- References
Velocity's syntax is designed to make it easier to create complex animations for HTML and SVG elements. In addition to its workflow benefits, Velocity provides animation performance that is competitive with CSS-based animation. 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. 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. Its broad browser and device support make it ideal for large enterprise distributions that must support low-powered devices.
Velocity is used to power the user interfaces of many notable websites, including those of Uber, Samsung, WhatsApp, Tumblr, HTC, Mazda, and Microsoft Windows. It is one of the most favorited projects on the code hosting service GitHub. In 2015, Velocity was nominated for Open Source Project of the Year by The Net Awards.
Features
Velocity's features include:
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.
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.
It is also possible to include Velocity directly from content delivery networks. (The link starting with // is protocol relative URL.)
Usage styles
Velocity has two usage styles:
$.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.$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:
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):
Chaining
Creating a series of consecutive animation calls in Velocity consists of placing velocity() calls back-to-back on the target jQuery element object:
Scrolling and Reversal
Scrolling in Velocity consists of passing in "scroll" as Velocity's first argument — in place of the typical CSS properties map:
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:
Velocity's reverse command defaults to the animation options used in the prior call. Passing in a new options object extends the previous one:
History
Velocity was developed by Julian Shapiro to address a lack of performant and designer-oriented JavaScript animation libraries. 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.
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.
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. 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. As of mid-2015, Velocity continues to be developed and maintained exclusively by Shapiro.
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.