# Velocity (JavaScript library)

> Mediated Wiki article. Canonical URL: https://mediated.wiki/source/Velocity_(JavaScript_library)
> Markdown URL: https://mediated.wiki/source/Velocity_(JavaScript_library).md
> Source: https://en.wikipedia.org/wiki/Velocity_(JavaScript_library)
> Source revision: 1303140368
> License: Creative Commons Attribution-ShareAlike 4.0 International (https://creativecommons.org/licenses/by-sa/4.0/)

Cross-platform JavaScript library

Velocity Original author Julian Shapiro Stable release 1.5.2[1] / July 31st, 2018[2] Written in JavaScript Operating system Cross-platform Platform See Browser support Type JavaScript library, animation License MIT[3] Website velocityjs.org Repository github.com/julianshapiro/velocity

**Velocity** is a [cross-platform](/source/Cross-platform) [JavaScript library](/source/JavaScript_library) designed to simplify the [client-side scripting](/source/Client-side_scripting) of website animation.[4] Velocity is [free, open-source](/source/Free_and_open_source_software) software licensed under the [MIT License](/source/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](/source/HTML) and [SVG](/source/Scalable_Vector_Graphics) elements.[6] In addition to its workflow benefits, Velocity provides animation performance that is competitive with [CSS](/source/CSS)-based animation.[7] Velocity achieves its performance by maintaining an internal cache of animation states and minimizing "layout [thrashing](/source/Thrashing_(computer_science))," the undesirable behavior that [web browsers](/source/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 [Uber](/source/Uber), [Samsung](/source/Samsung), [WhatsApp](/source/WhatsApp), [Tumblr](/source/Tumblr), [HTC](/source/HTC), [Mazda](/source/Mazda), and [Microsoft Windows](/source/Microsoft_Windows). It is one of the most favorited projects on the code hosting service [GitHub](/source/GitHub).[10] In 2015, Velocity was nominated for *Open Source Project of the Year* by [The Net Awards](/source/The_Net_Awards).[11]

## Features

Velocity's features include:[4]

- Browser window and element scrolling

- Independence from the [jQuery](/source/JQuery) framework[12]

- Animation reversal (the ability to undo the previous animation) and animation looping

- [SVG](/source/Scalable_Vector_Graphics) element animation[13]

- [RGB](/source/Web_colors) and [hex](/source/Web_colors) color animation

- [CSS](/source/CSS)'s *transform* property animation

- Pre-created animation effects via Velocity's *UI Pack*[14]

- Physics-based motion via the *spring* easing type

- [Promises](/source/Futures_and_promises) integration

### Browser support

Velocity supports all major desktop browsers ([Firefox](/source/Firefox), [Google Chrome](/source/Google_Chrome), and [Safari](/source/Safari_(web_browser))) plus the [iOS](/source/IOS) and [Android](/source/Android_(operating_system)) mobile operating systems. Its support extends as far back as [Internet Explorer](/source/Internet_Explorer) 8 and [Android](/source/Android_(operating_system)) 2.3.[15]

## 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](/source/MaxCDN)'s [jsDelivr](/source/JSDelivr) or [Cloudflare](/source/Cloudflare)'s [cdnjs](https://cdnjs.com/).

<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](/source/Subresource_Integrity).) It is recommended to always use [HTTPS](/source/HTTPS) for resources but this can be replaced with // to make use of [protocol relative URLs](/source/Protocol_relative_URL).

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.2/velocity.min.js" integrity="sha384-fcLDUAwcSMMfmpKMJ0dO2//SL2WJ5/kkyz/yvgtmLXBEp3GdqrQF9ahRerhdLXn+" crossorigin="anonymous"></script>

### Usage styles

Velocity has two usage styles:

- The $.Velocity function, which is a [factory method](/source/Factory_method_pattern) extended from the [jQuery](/source/JQuery) root object. This method animates raw [DOM](/source/Document_Object_Model) elements instead of [jQuery](/source/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](/source/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](/source/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 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 });

## History

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

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](/source/CSS)-based animation due to its speed advantages over older JavaScript libraries that lacked a focus on animation.[19]

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](/source/Integrated_development_environment).[20] In March 2015, [Peachpit](/source/Peachpit) published Shapiro's *Web Animation using JavaScript* book, which teaches both the beginning and advanced principles of developing web animations using Velocity.[*[citation needed](https://en.wikipedia.org/wiki/Wikipedia:Citation_needed)*] As of mid-2015, Velocity continues to be developed and maintained exclusively by Shapiro.[21]

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

## See also

- [Free and open-source software portal](https://en.wikipedia.org/wiki/Portal:Free_and_open-source_software)

- [D3.js](/source/D3.js)

- [Raphaël](/source/Rapha%C3%ABl_(JavaScript_library))

- [Three.js](/source/Three.js)

- [jQuery](/source/JQuery)

- [JavaScript framework](/source/JavaScript_framework)

- [JavaScript library](/source/JavaScript_library)

## Further reading

- [Animating without jQuery](https://www.smashingmagazine.com/2014/09/04/animating-without-jquery/)

- [How to use Velocity to easily add animations](http://www.creativebloq.com/web-design/use-velocity-add-animations-61515280/)

- [Fast UI animation using Velocity.js](http://www.sitepoint.com/incredibly-fast-ui-animation-using-velocity-js/)

## External links

- [Official website](https://velocityjs.org)

- [Velocity demo gallery](https://codepen.io/collection/tIjGb/)

## References

1. **[^](#cite_ref-1)** julianshapiro. ["velocity/README.md at master · julianshapiro/velocity · GitHub"](https://github.com/julianshapiro/velocity/blob/master/README.md). Github.com. Retrieved 2021-02-13.

1. **[^](#cite_ref-2)** ["History for package.json - julianshapiro/velocity · GitHub"](https://github.com/julianshapiro/velocity/commits/master/package.json). Github.com. Retrieved 2021-02-13.

1. ^ [***a***](#cite_ref-github1_3-0) [***b***](#cite_ref-github1_3-1) julianshapiro (2014-10-09). ["velocity/LICENSE.md at master · julianshapiro/velocity · GitHub"](https://github.com/julianshapiro/velocity/blob/master/LICENSE.md). Github.com. Retrieved 2016-01-20.

1. ^ [***a***](#cite_ref-davidwalsh1_4-0) [***b***](#cite_ref-davidwalsh1_4-1) ["JavaScript Animation"](http://davidwalsh.name/intro-javascript-animation). 15 June 2015.

1. **[^](#cite_ref-5)** ["Major Contributor To Open Source Technologies, Julian Shapiro, Pulls Back the Curtains on SAAS Usage"](https://www.forbes.com/sites/alextaub/2015/06/18/major-contributor-to-open-source-technologies-julian-shapiro-pulls-back-the-curtains-on-saas-usage/). *Forbes.com*. Retrieved 2016-01-20.

1. **[^](#cite_ref-6)** ["Velocity.js for designers"](https://web.archive.org/web/20160306060754/https://www.studiowolf.com/blog/velocity-js-for-designers/). Studio Wolf. Archived from [the original](http://www.studiowolf.com/blog/velocity-js-for-designers/) on 2016-03-06. Retrieved 2016-01-20.

1. ^ [***a***](#cite_ref-davidwalsh2_7-0) [***b***](#cite_ref-davidwalsh2_7-1) ["CSS vs. JS Animation: Which is Faster?"](http://davidwalsh.name/css-js-animation). 28 April 2014.

1. **[^](#cite_ref-8)** ["Velocity, the Powerhouse of JavaScript Libraries"](http://www.orbitinformatics.com/underrated-animation-engine-velocity-powerhouse-javascript-libraries/). 11 October 2017.

1. **[^](#cite_ref-9)** Julian Shapiro (2014-06-16). ["Incredibly Fast UI Animation Using Velocity.js"](http://www.sitepoint.com/incredibly-fast-ui-animation-using-velocity-js/). Sitepoint.com. Retrieved 2016-01-20.

1. **[^](#cite_ref-10)** ["Search · stars:>1 · GitHub"](https://github.com/search?p=19&q=stars%3A%3E1&s=stars&type=Repositories). Github.com. Retrieved 2016-01-20.

1. **[^](#cite_ref-11)** ["Shortlist The Net Awards 2015 Celebrating the best in web design and development"](https://thenetawards.com/vote/open-source/velocity-js/). Thenetawards.com. Retrieved 2016-01-20.

1. **[^](#cite_ref-12)** ["Animating Without jQuery – Smashing Magazine"](https://www.smashingmagazine.com/2014/09/04/animating-without-jquery/). Smashingmagazine.com. 2014-09-04. Retrieved 2016-01-20.

1. **[^](#cite_ref-13)** ["The Simple Intro to SVG Animation"](http://davidwalsh.name/svg-animation). 31 July 2014.

1. **[^](#cite_ref-14)** ["Use Velocity.js to apply slick app-like motion effects | JavaScript | Web Designer"](http://www.webdesignermag.co.uk/use-velocity-js-to-apply-slick-app-like-motion-effects/). Webdesignermag.co.uk. 2015-01-21. Retrieved 2016-01-20.

1. **[^](#cite_ref-15)** ["Velocity.js"](http://julian.com/research/velocity/). Julian.com. Retrieved 2016-01-20.

1. **[^](#cite_ref-16)** Team, Awwwards. ["Interview with Julian Shapiro"](http://www.awwwards.com/interview-with-julian-shapiro.html). Awwwards.com. Retrieved 2016-01-20.

1. **[^](#cite_ref-17)** Shapiro, Julian (2014-05-21). ["Treat Open Source Like a Startup ★ Mozilla Hacks – the Web developer blog"](https://hacks.mozilla.org/2014/05/open-source-marketing-with-velocityjs/). Hacks.mozilla.org. Retrieved 2016-01-20.

1. **[^](#cite_ref-18)** Greg Brockman (2014-06-06). ["Open-Source Retreat grantees"](https://stripe.com/blog/open-source-retreat-grantees). Stripe.com. Retrieved 2016-01-20.

1. **[^](#cite_ref-19)** Aurelio De Rosa (2014-06-23). ["Easily Improving jQuery Animations"](http://www.sitepoint.com/easily-improving-jquery-animations/). Sitepoint.com. Retrieved 2016-01-20.

1. **[^](#cite_ref-20)** Remix this video (2014-09-06). ["Velocity Motion Designer: Overview"](https://www.youtube.com/watch?v=7IxhIMIdkPs). YouTube. Retrieved 2016-01-20.

1. **[^](#cite_ref-21)** ["Contributors to julianshapiro/Velocity"](https://github.com/julianshapiro/velocity/graphs/contributors). *[GitHub](/source/GitHub)*.

---
Adapted from the Wikipedia article [Velocity (JavaScript library)](https://en.wikipedia.org/wiki/Velocity_(JavaScript_library)) by Wikipedia contributors ([contributor history](https://en.wikipedia.org/wiki/Velocity_(JavaScript_library)?action=history)). Available under [Creative Commons Attribution-ShareAlike 4.0 International](https://creativecommons.org/licenses/by-sa/4.0/). Changes may have been made.