Velocity (JavaScript library)

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

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]

Contents

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 Uber, Samsung, WhatsApp, Tumblr, HTC, Mazda, and Microsoft Windows. It is one of the most favorited projects on the code hosting service GitHub. [10] In 2015, Velocity was nominated for Open Source Project of the Year by The Net Awards. [11]

Features

Velocity's features include: [4]

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. [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's jsDelivr or Cloudflare's cdnjs.

<scriptsrc="velocity.min.js"></script>

It is also possible to include Velocity directly from content delivery networks. (The integrity attribute is used for Subresource Integrity.) It is recommended to always use HTTPS for resources but this can be replaced with // to make use of protocol relative URLs.

<scriptsrc="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:

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 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 animation libraries. [16] [17] 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. [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-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. [20] 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.[ 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 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

Further reading

Related Research Articles

<span class="mw-page-title-main">Document Object Model</span> Convention for representing and interacting with objects in HTML, XHTML, and XML documents

The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an HTML or XML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them one can change the structure, style or content of a document. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed.

<span class="mw-page-title-main">YUI Library</span>

The Yahoo! User Interface Library (YUI) is a discontinued open-source JavaScript library for building richly interactive web applications using techniques such as Ajax, DHTML, and DOM scripting. YUI includes several core CSS resources. It is available under a BSD License. Development on YUI began in 2005 and Yahoo! properties such as My Yahoo! and the Yahoo! front page began using YUI in the summer of that year. YUI was released for public use in February 2006. It was actively developed by a core team of Yahoo! engineers.

jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. It is free, open-source software using the permissive MIT License. As of August 2022, jQuery is used by 77% of the 10 million most popular websites. Web analysis indicates that it is the most widely deployed JavaScript library by a large margin, having at least 3 to 4 times more usage than any other JavaScript library.

This is a comparison of web frameworks for front-end web development that are heavily reliant on JavaScript code for their behavior.

Animation of Scalable Vector Graphics, an open XML-based standard vector graphics format is possible through various means:

<span class="mw-page-title-main">Google Closure Tools</span> JavaScript developer toolkit

Google Closure Tools is a set of tools to help developers build rich web applications with JavaScript. It was developed by Google for use in their web applications such as Gmail, Google Docs and Google Maps.

Modernizr is a JavaScript library that detects the features available in a user's browser. This lets web pages avoid unsupported features by informing the user their browser isn't supported or loading a polyfill. Modernizr aims to provide feature detection in a consistent and easy to use manner that discourages the use of failure-prone browser sniffing.

In software development, a polyfill is code that implements a feature of the development environment that does not natively support the feature. Most often, it refers to a JavaScript library that implements an HTML5 or CSS web standard, either an established standard on older browsers, or a proposed standard on existing browsers. Polyfills are also used in PHP and Python. Formally, "a polyfill is a shim for a browser API."

AngularJS is a discontinued free and open-source JavaScript-based web framework for developing single-page applications. It was maintained mainly by Google and a community of individuals and corporations. It aimed to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in web applications and progressive web applications.

<span class="mw-page-title-main">Bootstrap (front-end framework)</span> Web design front-end framework

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

<span class="mw-page-title-main">Three.js</span> JavaScript library for 3D graphics

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.

<span class="mw-page-title-main">Brackets (text editor)</span> Editor for web development

Brackets is a source code editor with a primary focus on web development. Created by Adobe Inc., it is free and open-source software licensed under the MIT License, and is currently maintained on GitHub by open-source developers. It is written in JavaScript, HTML and CSS. Brackets is cross-platform, available for macOS, Windows, and most Linux distributions. The main purpose of Brackets is its live HTML, CSS and JavaScript editing functionality.

There are different JavaScript charting libraries available. Below is a comparison of which features are available in each.

Web Components are a set of features that provide a standard component model for the web allowing for encapsulation and interoperability of individual HTML elements. Web Components are popular approach to build microfrontends.

ContentTools is an open-source WYSIWYG editor for HTML content written in JavaScript/CoffeeScript by Anthony Blackshaw of Getme Limited.

<span class="mw-page-title-main">Vue.js</span> Open-source JavaScript library for building user interfaces

Vue.js is an open-source model–view–viewmodel front end JavaScript library for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members.

This is a list of articles related to the JavaScript programming language.

<span class="mw-page-title-main">Babylon.js</span> Real-time 3D rendering engine for JavaScript

Babylon.js is a real time 3D engine using a JavaScript library for displaying 3D graphics in a web browser via HTML5. The source code is available on GitHub and distributed under the Apache License 2.0.

<span class="mw-page-title-main">Babel (transcompiler)</span> Backwards compatible JavaScript compiler

Babel is a free and open-source JavaScript transcompiler that is mainly used to convert ECMAScript 2015+ (ES6+) code into backwards-compatible JavaScript code that can be run by older JavaScript engines. It allows web developers to take advantage of the newest features of the language.

Tailwind CSS is an open source CSS framework. The main feature of this library is that, unlike other CSS frameworks like Bootstrap, it does not provide a series of predefined classes for elements such as buttons or tables. Instead, it creates a list of "utility" CSS classes that can be used to style each element by mixing and matching.

References

  1. ↑ julianshapiro. "velocity/README.md at master · julianshapiro/velocity · GitHub". Github.com. Retrieved 2021-02-13.
  2. ↑ "History for package.json - julianshapiro/velocity · GitHub". Github.com. Retrieved 2021-02-13.
  3. 1 2 julianshapiro (2014-10-09). "velocity/LICENSE.md at master · julianshapiro/velocity · GitHub". Github.com. Retrieved 2016-01-20.
  4. 1 2 "JavaScript Animation". 15 June 2015.
  5. ↑ "Major Contributor To Open Source Technologies, Julian Shapiro, Pulls Back the Curtains on SAAS Usage". Forbes.com. Retrieved 2016-01-20.
  6. ↑ "Velocity.js for designers". Studio Wolf. Retrieved 2016-01-20.
  7. 1 2 "CSS vs. JS Animation: Which is Faster?". 28 April 2014.
  8. ↑ "Velocity, the Powerhouse of JavaScript Libraries". 11 October 2017.
  9. ↑ Julian Shapiro (2014-06-16). "Incredibly Fast UI Animation Using Velocity.js". Sitepoint.com. Retrieved 2016-01-20.
  10. ↑ "Search · stars:>1 · GitHub". Github.com. Retrieved 2016-01-20.
  11. ↑ "Shortlist The Net Awards 2015 Celebrating the best in web design and development". Thenetawards.com. Retrieved 2016-01-20.
  12. ↑ "Animating Without jQuery – Smashing Magazine". Smashingmagazine.com. 2014-09-04. Retrieved 2016-01-20.
  13. ↑ "The Simple Intro to SVG Animation". 31 July 2014.
  14. ↑ "Use Velocity.js to apply slick app-like motion effects | JavaScript | Web Designer". Webdesignermag.co.uk. 2015-01-21. Retrieved 2016-01-20.
  15. ↑ "Velocity.js". Julian.com. Retrieved 2016-01-20.
  16. ↑ Team, Awwwards. "Interview with Julian Shapiro". Awwwards.com. Retrieved 2016-01-20.
  17. ↑ Shapiro, Julian (2014-05-21). "Treat Open Source Like a Startup ★ Mozilla Hacks – the Web developer blog". Hacks.mozilla.org. Retrieved 2016-01-20.
  18. ↑ Greg Brockman (2014-06-06). "Open-Source Retreat grantees". Stripe.com. Retrieved 2016-01-20.
  19. ↑ Aurelio De Rosa (2014-06-23). "Easily Improving jQuery Animations". Sitepoint.com. Retrieved 2016-01-20.
  20. ↑ Remix this video (2014-09-06). "Velocity Motion Designer: Overview". YouTube. Retrieved 2016-01-20.
  21. ↑ "Contributors to julianshapiro/Velocity". GitHub .
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.