Velocity (JavaScript library)

<h2 id="features">Features</h2>
<p>Velocity's features include:<a class="footnote-ref" id="fnref:11" href="#fn:11"><sup>11</sup></a>
</p>
<ul><li>Browser window and element scrolling</li>
<li>Independence from the <a href="/facts/JQuery/YIqFG0ww">jQuery</a> framework<a class="footnote-ref" id="fnref:12" href="#fn:12"><sup>12</sup></a></li>
<li>Animation reversal (the ability to undo the previous animation) and animation looping</li>
<li><a href="/facts/Scalable_Vector_Graphics/ARq5C3YV">SVG</a> element animation<a class="footnote-ref" id="fnref:13" href="#fn:13"><sup>13</sup></a></li>
<li><a href="/facts/Web_colors/bvUDhlfX">RGB</a> and <a href="/facts/Web_colors/bvUDhlfX">hex</a> color animation</li>
<li><a href="/facts/CSS/tA90XBQo">CSS</a>'s <i>transform</i> property animation</li>
<li>Pre-created animation effects via Velocity's <i>UI Pack</i><a class="footnote-ref" id="fnref:14" href="#fn:14"><sup>14</sup></a></li>
<li>Physics-based motion via the <i>spring</i> easing type</li>
<li><a href="/facts/Futures_and_promises/5Mpgxv4m">Promises</a> integration</li></ul>
<h3>Browser support</h3>
<p>Velocity supports all major desktop browsers (<a href="/facts/Firefox/xez2zv8H">Firefox</a>, <a href="/facts/Google_Chrome/4INfWq37">Google Chrome</a>, and <a href="/facts/Safari_(web_browser)/9R8v7tNl">Safari</a>) plus the <a href="/facts/IOS/mK5cggH5">iOS</a> and <a href="/facts/Android_(operating_system)/nNyHb0xz">Android</a> mobile operating systems. Its support extends as far back as <a href="/facts/Internet_Explorer/uL8a4Y5l">Internet Explorer</a> 8 and <a href="/facts/Android_(operating_system)/nNyHb0xz">Android</a> 2.3.<a class="footnote-ref" id="fnref:15" href="#fn:15"><sup>15</sup></a>
</p>
<h2 id="usage">Usage</h2>
<h3>Including the library</h3>
<p>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 <a href="/facts/MaxCDN/JeawWkrw">MaxCDN</a>'s <a href="/facts/JSDelivr/bTjMLpQT">jsDelivr</a> or <a href="/facts/Cloudflare/CmQr5dy4">Cloudflare</a>'s <a href="https://cdnjs.com/">cdnjs</a>.
</p>
<script src="velocity.min.js"></script>

<p>It is also possible to include Velocity directly from content delivery networks. (The integrity attribute is used for <a href="/facts/Subresource_Integrity/8SgkJEwB">Subresource Integrity</a>.)
It is recommended to always use <a href="/facts/HTTPS/MSWYz4zo">HTTPS</a> for resources but this can be replaced with // to make use of <a href="/facts/Protocol_relative_URL/pPD5g7Wq">protocol relative URLs</a>.
</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.2/velocity.min.js" integrity="sha384-fcLDUAwcSMMfmpKMJ0dO2//SL2WJ5/kkyz/yvgtmLXBEp3GdqrQF9ahRerhdLXn+" crossorigin="anonymous"></script>

<h3>Usage styles</h3>
<p>Velocity has two usage styles:
</p>
<ul><li>The $.Velocity function, which is a <a href="/facts/Factory_method_pattern/frh0TknQ">factory method</a> extended from the <a href="/facts/JQuery/YIqFG0ww">jQuery</a> root object. This method animates raw <a href="/facts/Document_Object_Model/GglE6jGx">DOM</a> elements instead of <a href="/facts/JQuery/YIqFG0ww">jQuery</a>-wrapped elements. This is the style employed when using Velocity without jQuery on the page.</li>
<li>The $element.velocity() function. This is the style used for animating jQuery element objects when jQuery <i>is</i> present on the page.</li></ul>
<p>Animation calls in Velocity consist of supplying the desired element(s) to animate, an <i>animation property map</i> to specify the <a href="/facts/CSS/tA90XBQo">CSS</a> properties to be animated, and an optional <i>options object</i> to specify animation settings (e.g. <i>duration</i>).
</p>
<h3>Arguments</h3>
<p>Velocity accepts one or more arguments. The first argument, which is required, can either be the name of a predefined Velocity command (e.g. <i>scroll</i> or <i>reverse</i>) or an object consisting of CSS properties to be animated:
</p>
// Animate an element's width to 100px and its left property to 200px
$element.velocity({ width: "100px", left: "200px" });

<p>The second argument, which is optional, is an object. It is used to specify animation options such as <i>duration</i>, <i>easing</i>, and <i>complete</i> (an arbitrary function to execute once the animation has completed):
</p>
// 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 });

<h3>Chaining</h3>
<p>Creating a series of consecutive animation calls in Velocity consists of placing <i>velocity()</i> calls back-to-back on the target <a href="/facts/JQuery/YIqFG0ww">jQuery</a> element object:
</p>
$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 });

<h3>Scrolling and reversal</h3>
<p>Scrolling in Velocity consists of passing in <i>"scroll"</i> as Velocity's first argument — in place of the typical CSS properties map:
</p>
// Scroll with a duration of 750 ms
$element.velocity("scroll", { duration: 750 });

<p>The browser will subsequently scroll down to the top edge of the element that Velocity was invoked on.
</p><p>Animation reversal in Velocity consists of passing in <i>"reverse"</i> as Velocity's first argument:
</p>
// 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");

<p>Velocity's <i>reverse</i> command defaults to the animation options used in the prior call. Passing in a new options object extends the previous one:
</p>
$element.velocity({ height: "500px" }, { duration: 500 });
// Extend the previous reverse call's options object with a new duration value
$element.velocity("reverse", { duration: 1000 });

<h2 id="history">History</h2>
<p>Velocity was developed by Julian Shapiro to address a lack of performant and designer-oriented <a href="/facts/JavaScript/XhhIIEsl">JavaScript</a> animation libraries.<a class="footnote-ref" id="fnref:16" href="#fn:16"><sup>16</sup></a><a class="footnote-ref" id="fnref:17" href="#fn:17"><sup>17</sup></a> <a href="/facts/Stripe_(company)/edJLS72l">Stripe</a>, a popular <a href="/facts/Web_developer/Cd0mJftL">web developer</a>-focused <a href="/facts/Internet_technology/KNkxtSpw">Internet technology</a> company sponsored Shapiro on a grant to help provide the financial resources necessary to continue full-time development on Velocity.<a class="footnote-ref" id="fnref:18" href="#fn:18"><sup>18</sup></a>
</p><p>The high performance of Velocity's internal animation engine helped to repopularize JavaScript-based web animation, which had previously fallen out of favor for <a href="/facts/CSS/tA90XBQo">CSS</a>-based animation due to its speed advantages over older JavaScript libraries that lacked a focus on animation.<a class="footnote-ref" id="fnref:19" href="#fn:19"><sup>19</sup></a>
</p><p>In September 2014, Shapiro released <i>Velocity Motion Designer</i>, 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 <a href="/facts/Integrated_development_environment/jbEINSQf">IDE</a>.<a class="footnote-ref" id="fnref:20" href="#fn:20"><sup>20</sup></a> In March 2015, <a href="/facts/Peachpit/j9mbEWJB">Peachpit</a> published Shapiro's <i>Web Animation using JavaScript</i> 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.<a class="footnote-ref" id="fnref:21" href="#fn:21"><sup>21</sup></a>
</p><p>In addition to Velocity's use in professional enterprise environments, it is also widely used for <a href="/facts/Web_development/UW5ypSzj">web development</a> experimentation and beginner practicing. Proof-of-concept web development projects built on top of Velocity are commonly posted to <a href="/facts/CodePen/hPSnwtVD">CodePen</a> (<a href="https://codepen.io/collection/tIjGb">example</a>), a leading community code sharing service.
</p>
<h2 id="see-also">See also</h2>
<ul>
<li>Free and open-source software portal</li></ul>
<ul><li><a href="/facts/D3.js/H5xQ0vcu">D3.js</a></li>
<li><a href="/facts/Rapha%25C3%25ABl_(JavaScript_library)/vkLWaeA2">Raphaël</a></li>
<li><a href="/facts/Three.js/h9p32kv5">Three.js</a></li>
<li><a href="/facts/JQuery/YIqFG0ww">jQuery</a></li>
<li><a href="/facts/JavaScript_framework/8f1CVHDX">JavaScript framework</a></li>
<li><a href="/facts/JavaScript_library/vjUJ5DGC">JavaScript library</a></li></ul>
<h2 id="further-reading">Further reading</h2>
<ul><li><a href="https://www.smashingmagazine.com/2014/09/04/animating-without-jquery/">Animating without jQuery</a></li>
<li><a href="http://www.creativebloq.com/web-design/use-velocity-add-animations-61515280/">How to use Velocity to easily add animations</a></li>
<li><a href="http://www.sitepoint.com/incredibly-fast-ui-animation-using-velocity-js/">Fast UI animation using Velocity.js</a></li></ul>
<h2 id="external-links">External links</h2>
<ul><li><a href="//velocityjs.org">Official website</a></li>
<li><a href="https://codepen.io/collection/tIjGb/">Velocity demo gallery</a></li></ul>

<h2 id="references">References</h2>

<ol>
<li id="fn:1"><p>"JavaScript Animation". 15 June 2015. <a href="http://davidwalsh.name/intro-javascript-animation" target="_blank">http://davidwalsh.name/intro-javascript-animation</a> <a href="#fnref:1" class="footnote-back-ref">↩</a></p></li>
<li id="fn:2"><p>julianshapiro (2014-10-09). "velocity/LICENSE.md at master · julianshapiro/velocity · GitHub". Github.com. Retrieved 2016-01-20. <a href="https://github.com/julianshapiro/velocity/blob/master/LICENSE.md" target="_blank">https://github.com/julianshapiro/velocity/blob/master/LICENSE.md</a> <a href="#fnref:2" class="footnote-back-ref">↩</a></p></li>
<li id="fn:3"><p>"Major Contributor To Open Source Technologies, Julian Shapiro, Pulls Back the Curtains on SAAS Usage". Forbes.com. Retrieved 2016-01-20. <a href="https://www.forbes.com/sites/alextaub/2015/06/18/major-contributor-to-open-source-technologies-julian-shapiro-pulls-back-the-curtains-on-saas-usage/" target="_blank">https://www.forbes.com/sites/alextaub/2015/06/18/major-contributor-to-open-source-technologies-julian-shapiro-pulls-back-the-curtains-on-saas-usage/</a> <a href="#fnref:3" class="footnote-back-ref">↩</a></p></li>
<li id="fn:4"><p>"Velocity.js for designers". Studio Wolf. Retrieved 2016-01-20. <a href="http://www.studiowolf.com/blog/velocity-js-for-designers/" target="_blank">http://www.studiowolf.com/blog/velocity-js-for-designers/</a> <a href="#fnref:4" class="footnote-back-ref">↩</a></p></li>
<li id="fn:5"><p>"CSS vs. JS Animation: Which is Faster?". 28 April 2014. <a href="http://davidwalsh.name/css-js-animation" target="_blank">http://davidwalsh.name/css-js-animation</a> <a href="#fnref:5" class="footnote-back-ref">↩</a></p></li>
<li id="fn:6"><p>"CSS vs. JS Animation: Which is Faster?". 28 April 2014. <a href="http://davidwalsh.name/css-js-animation" target="_blank">http://davidwalsh.name/css-js-animation</a> <a href="#fnref:6" class="footnote-back-ref">↩</a></p></li>
<li id="fn:7"><p>"Velocity, the Powerhouse of JavaScript Libraries". 11 October 2017. <a href="http://www.orbitinformatics.com/underrated-animation-engine-velocity-powerhouse-javascript-libraries/" target="_blank">http://www.orbitinformatics.com/underrated-animation-engine-velocity-powerhouse-javascript-libraries/</a> <a href="#fnref:7" class="footnote-back-ref">↩</a></p></li>
<li id="fn:8"><p>Julian Shapiro (2014-06-16). "Incredibly Fast UI Animation Using Velocity.js". Sitepoint.com. Retrieved 2016-01-20. <a href="http://www.sitepoint.com/incredibly-fast-ui-animation-using-velocity-js/" target="_blank">http://www.sitepoint.com/incredibly-fast-ui-animation-using-velocity-js/</a> <a href="#fnref:8" class="footnote-back-ref">↩</a></p></li>
<li id="fn:9"><p>"Search · stars:>1 · GitHub". Github.com. Retrieved 2016-01-20. <a href="https://github.com/search?p=19&q=stars%3A%3E1&s=stars&type=Repositories" target="_blank">https://github.com/search?p=19&q=stars%3A%3E1&s=stars&type=Repositories</a> <a href="#fnref:9" class="footnote-back-ref">↩</a></p></li>
<li id="fn:10"><p>"Shortlist The Net Awards 2015 Celebrating the best in web design and development". Thenetawards.com. Retrieved 2016-01-20. <a href="https://thenetawards.com/vote/open-source/velocity-js/" target="_blank">https://thenetawards.com/vote/open-source/velocity-js/</a> <a href="#fnref:10" class="footnote-back-ref">↩</a></p></li>
<li id="fn:11"><p>"JavaScript Animation". 15 June 2015. <a href="http://davidwalsh.name/intro-javascript-animation" target="_blank">http://davidwalsh.name/intro-javascript-animation</a> <a href="#fnref:11" class="footnote-back-ref">↩</a></p></li>
<li id="fn:12"><p>"Animating Without jQuery – Smashing Magazine". Smashingmagazine.com. 2014-09-04. Retrieved 2016-01-20. <a href="https://www.smashingmagazine.com/2014/09/04/animating-without-jquery/" target="_blank">https://www.smashingmagazine.com/2014/09/04/animating-without-jquery/</a> <a href="#fnref:12" class="footnote-back-ref">↩</a></p></li>
<li id="fn:13"><p>"The Simple Intro to SVG Animation". 31 July 2014. <a href="http://davidwalsh.name/svg-animation" target="_blank">http://davidwalsh.name/svg-animation</a> <a href="#fnref:13" class="footnote-back-ref">↩</a></p></li>
<li id="fn:14"><p>"Use Velocity.js to apply slick app-like motion effects | JavaScript | Web Designer". Webdesignermag.co.uk. 2015-01-21. Retrieved 2016-01-20. <a href="http://www.webdesignermag.co.uk/use-velocity-js-to-apply-slick-app-like-motion-effects/" target="_blank">http://www.webdesignermag.co.uk/use-velocity-js-to-apply-slick-app-like-motion-effects/</a> <a href="#fnref:14" class="footnote-back-ref">↩</a></p></li>
<li id="fn:15"><p>"Velocity.js". Julian.com. Retrieved 2016-01-20. <a href="http://julian.com/research/velocity/" target="_blank">http://julian.com/research/velocity/</a> <a href="#fnref:15" class="footnote-back-ref">↩</a></p></li>
<li id="fn:16"><p>Team, Awwwards. "Interview with Julian Shapiro". Awwwards.com. Retrieved 2016-01-20. <a href="http://www.awwwards.com/interview-with-julian-shapiro.html" target="_blank">http://www.awwwards.com/interview-with-julian-shapiro.html</a> <a href="#fnref:16" class="footnote-back-ref">↩</a></p></li>
<li id="fn:17"><p>Shapiro, Julian (2014-05-21). "Treat Open Source Like a Startup ★ Mozilla Hacks – the Web developer blog". Hacks.mozilla.org. Retrieved 2016-01-20. <a href="https://hacks.mozilla.org/2014/05/open-source-marketing-with-velocityjs/" target="_blank">https://hacks.mozilla.org/2014/05/open-source-marketing-with-velocityjs/</a> <a href="#fnref:17" class="footnote-back-ref">↩</a></p></li>
<li id="fn:18"><p>Greg Brockman (2014-06-06). "Open-Source Retreat grantees". Stripe.com. Retrieved 2016-01-20. <a href="https://stripe.com/blog/open-source-retreat-grantees" target="_blank">https://stripe.com/blog/open-source-retreat-grantees</a> <a href="#fnref:18" class="footnote-back-ref">↩</a></p></li>
<li id="fn:19"><p>Aurelio De Rosa (2014-06-23). "Easily Improving jQuery Animations". Sitepoint.com. Retrieved 2016-01-20. <a href="http://www.sitepoint.com/easily-improving-jquery-animations/" target="_blank">http://www.sitepoint.com/easily-improving-jquery-animations/</a> <a href="#fnref:19" class="footnote-back-ref">↩</a></p></li>
<li id="fn:20"><p>Remix this video (2014-09-06). "Velocity Motion Designer: Overview". YouTube. Retrieved 2016-01-20. <a href="https://www.youtube.com/watch?v=7IxhIMIdkPs" target="_blank">https://www.youtube.com/watch?v=7IxhIMIdkPs</a> <a href="#fnref:20" class="footnote-back-ref">↩</a></p></li>
<li id="fn:21"><p>"Contributors to julianshapiro/Velocity". GitHub. <a href="https://github.com/julianshapiro/velocity/graphs/contributors" target="_blank">https://github.com/julianshapiro/velocity/graphs/contributors</a> <a href="#fnref:21" class="footnote-back-ref">↩</a></p></li>
</ol>

Velocity (JavaScript library) open-in-new

Velocity (JavaScript library)