Velocity is a
cross-platform
In computing, cross-platform software (also called multi-platform software, platform-agnostic software, or platform-independent software) is computer software that is designed to work in several computing platforms. Some cross-platform software ...
JavaScript library A JavaScript library is a library of pre-written JavaScript code that allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies.
Libraries
With the expanded demands for JavaScript, an ea ...
designed to simplify the
client-side scripting of website animation.
Velocity is
free, open-source software licensed under the
MIT License
The MIT License is a permissive free software license originating at the Massachusetts Institute of Technology (MIT) in the late 1980s. As a permissive license, it puts only very limited restriction on reuse and has, therefore, high license comp ...
.
It is the most popular open source web animation engine.
Velocity's syntax is designed to make it easier to create complex animations for
HTML
The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaS ...
and
SVG
Scalable Vector Graphics (SVG) is an XML-based vector image format for defining two-dimensional graphics, having support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium s ...
elements. In addition to its workflow benefits, Velocity provides animation performance that is competitive with
CSS
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone technolo ...
-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
Uber
Uber Technologies, Inc. (Uber), based in San Francisco, provides mobility as a service, ride-hailing (allowing users to book a car and driver to transport them in a way similar to a taxi), food delivery ( Uber Eats and Postmates), pa ...
,
Samsung
The Samsung Group (or simply Samsung) ( ko, 삼성 ) is a South Korean multinational manufacturing conglomerate headquartered in Samsung Town, Seoul, South Korea. It comprises numerous affiliated businesses, most of them united under the ...
,
WhatsApp
WhatsApp (also called WhatsApp Messenger) is an internationally available freeware, cross-platform, centralized instant messaging (IM) and voice-over-IP (VoIP) service owned by American company Meta Platforms (formerly Facebook). It allows use ...
,
Tumblr
Tumblr (stylized as tumblr; pronounced "tumbler") is an American microblogging and social networking website founded by David Karp in 2007 and currently owned by Automattic. The service allows users to post multimedia and other content to ...
,
HTC
HTC Corporation ( zh, t=宏達國際電子股份有限公司, s=宏达国际电子股份有限公司, p=Hóngdá Guójì Diànzǐ Gǔfèn Yǒuxiàn Gōngsī, first=t) or High Tech Computer Corporation, (literally ''Hongda International Electron ...
,
Mazda
, commonly referred to as simply Mazda, is a Japanese multinational automotive manufacturer headquartered in Fuchū, Hiroshima, Japan.
In 2015, Mazda produced 1.5 million vehicles for global sales, the majority of which (nearly one ...
, and
Microsoft Windows
Windows is a group of several proprietary graphical operating system families developed and marketed by Microsoft. Each family caters to a certain sector of the computing industry. For example, Windows NT for consumers, Windows Server for ...
. It is one of the most favorited projects on the code hosting service
GitHub
GitHub, Inc. () is an Internet hosting service for software development and version control using Git. It provides the distributed version control of Git plus access control, bug tracking, software feature requests, task management, cont ...
. In 2015, Velocity was nominated for ''Open Source Project of the Year'' by
The Net Awards.
Features
Velocity's features include:
* Browser window and element scrolling
* Independence from the
jQuery framework
* Animation reversal (the ability to undo the previous animation) and animation looping
*
SVG
Scalable Vector Graphics (SVG) is an XML-based vector image format for defining two-dimensional graphics, having support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium s ...
element animation
*
RGB and
hex color animation
*
CSS
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone technolo ...
's ''transform'' property animation
* Pre-created animation effects via Velocity's ''UI Pack''
* Physics-based motion via the ''spring'' easing type
*
Promises
A promise is a transaction whereby a person makes a vow or the suggestion of a guarantee.
Promise(s) may also refer to:
Places
* Promise, Oregon
* Promise, South Dakota
* Promise City, Iowa
* Promise Land, Tennessee or Promise
Film and TV
* '' ...
integration
Browser support
Velocity supports all major desktop browsers (
Firefox
Mozilla Firefox, or simply Firefox, is a free and open-source web browser developed by the Mozilla Foundation and its subsidiary, the Mozilla Corporation. It uses the Gecko rendering engine to display web pages, which implements current ...
,
Google Chrome
Google Chrome is a cross-platform web browser developed by Google. It was first released in 2008 for Microsoft Windows, built with free software components from Apple WebKit and Mozilla Firefox. Versions were later released for Linux, macOS, ...
, and
Safari
A safari (; ) is an overland journey to observe wild animals, especially in eastern or southern Africa. The so-called "Big Five" game animals of Africa – lion, leopard, rhinoceros, elephant, and Cape buffalo – particularly form an impor ...
) plus the
iOS and
Android mobile operating systems. Its support extends as far back as
Internet Explorer
Internet Explorer (formerly Microsoft Internet Explorer and Windows Internet Explorer, commonly abbreviated IE or MSIE) is a series of graphical web browsers developed by Microsoft which was used in the Windows line of operating systems (in ...
8 and
Android 2.3.
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
Cloudflare, Inc. is an American content delivery network and DDoS mitigation company, founded in 2009. It primarily acts as a reverse proxy between a website's visitor and the Cloudflare customer's hosting provider. Its headquarters are in Sa ...
'
cdnjs
It is also possible to include Velocity directly from content delivery networks. (The integrity attribute is used for
Subresource Integrity Subresource Integrity or SRI is a W3C recommendation to provide a method to protect website delivery. Specifically, it validates assets served by a third party, such as a content delivery network (CDN). This ensures these assets have not been compro ...
.)
It is recommended to always use
HTTPS
Hypertext Transfer Protocol Secure (HTTPS) is an extension of the Hypertext Transfer Protocol (HTTP). It is used for secure communication over a computer network, and is widely used on the Internet. In HTTPS, the communication protocol is enc ...
for resources but this can be replaced with
//
to make use of
protocol relative URLs.
Usage styles
Velocity has two usage styles:
* The
$.Velocity
function, which is a
factory method
In class-based programming, the factory method pattern is a creational pattern that uses factory methods to deal with the problem of creating objects without having to specify the exact class of the object that will be created. This is done by c ...
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
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone technolo ...
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();
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(, );
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(, )
// Continue on to this animation once the previous one has completed
.velocity(, )
// And once more...
.velocity(, );
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 750 ms
$element.velocity("scroll", );
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(, );
// 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(, );
// Extend the previous reverse call's options object with a new duration value
$element.velocity("reverse", );
History
Velocity was developed by Julian Shapiro to address a lack of performant and designer-oriented
JavaScript
JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of websites use JavaScript on the client side for webpage behavior, of ...
animation libraries.
Stripe
Stripe, striped, or stripes may refer to:
Decorations
*Stripe (pattern), a line or band that differs in colour or tone from an adjacent surface
*Racing stripe, a vehicle decoration
*Service stripe, a decoration of the U.S. military
Entertainment
...
, a popular
web developer
A web developer is a programmer who develops World Wide Web applications using a client–server model. The applications typically use HTML, CSS, and JavaScript in the client, and any general-purpose programming language in the server. is used f ...
-focused
Internet technology
The Internet protocol suite, commonly known as TCP/IP, is a framework for organizing the set of communication protocols used in the Internet and similar computer networks according to functional criteria. The foundational protocols in the su ...
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
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone technolo ...
-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
Web development is the work involved in developing a website for the Internet (World Wide Web) or an intranet (a private network). Web development can range from developing a simple single static page of plain text to complex web applications ...
experimentation and beginner practicing. Proof-of-concept web development projects built on top of Velocity are commonly posted to
CodePenexample, a leading community code sharing service.
See also
*
D3.js
D3.js (also known as D3, short for Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of Scalable Vector Graphics (SVG), HTML5, and Cascading Style Sheets (CSS) sta ...
*
Raphaël
*
Three.js
Three.js is a cross-browser JavaScript library and application programming interface (API) used to create and display animated 3D computer graphics in a web browser using WebGL. The source code is hosted in a repository on GitHub.
Overview ...
*
jQuery
*
JavaScript framework
A web framework (WF) or web application framework (WAF) is a software framework that is designed to support the development of web applications including web services, web resources, and web APIs. Web frameworks provide a standard way to build an ...
*
JavaScript library A JavaScript library is a library of pre-written JavaScript code that allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies.
Libraries
With the expanded demands for JavaScript, an ea ...
Further reading
Animating without jQueryHow to use Velocity to easily add animationsFast UI animation using Velocity.js
External links
*
Velocity demo gallery
References
{{Reflist
JavaScript libraries
Free software programmed in JavaScript
Ajax (programming)
Software using the MIT license
2014 software