| Velocity | |
|---|---|
| Original author | Julian Shapiro |
| Stable release | |
| Written in | JavaScript |
| Operating system | Cross-platform |
| Platform | See Browser support |
| Type | JavaScript library, animation |
| License | MIT[3] |
| Website | velocityjs |
| Repository | |
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]
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 window and element scrolling
- Independence from the jQuery framework[12]
- Animation reversal (the ability to undo the previous animation) and animation looping
- SVG element animation[13]
- RGB and hex color animation
- CSS's transform property animation
- Pre-created animation effects via Velocity's UI Pack[14]
- Physics-based motion via the spring easing type
- Promises integration
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.
<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.)
It is recommended to always use HTTPS for resources but this can be replaced with // to make use of protocol relative URLs.
<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
$.Velocityfunction, 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. - 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 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
External links
References
- ↑ julianshapiro. "velocity/README.md at master · julianshapiro/velocity · GitHub". Github.com. Retrieved 2021-02-13.
- ↑ "History for package.json - julianshapiro/velocity · GitHub". Github.com. Retrieved 2021-02-13.
- 1 2 julianshapiro (2014-10-09). "velocity/LICENSE.md at master · julianshapiro/velocity · GitHub". Github.com. Retrieved 2016-01-20.
- 1 2 "JavaScript Animation". 15 June 2015.
- ↑ "Major Contributor To Open Source Technologies, Julian Shapiro, Pulls Back the Curtains on SAAS Usage". Forbes.com. Retrieved 2016-01-20.
- ↑ "Velocity.js for designers". Studio Wolf. Archived from the original on 2016-03-06. Retrieved 2016-01-20.
- 1 2 "CSS vs. JS Animation: Which is Faster?". 28 April 2014.
- ↑ "Velocity, the Powerhouse of JavaScript Libraries". 11 October 2017.
- ↑ Julian Shapiro (2014-06-16). "Incredibly Fast UI Animation Using Velocity.js". Sitepoint.com. Retrieved 2016-01-20.
- ↑ "Search · stars:>1 · GitHub". Github.com. Retrieved 2016-01-20.
- ↑ "Shortlist The Net Awards 2015 Celebrating the best in web design and development". Thenetawards.com. Retrieved 2016-01-20.
- ↑ "Animating Without jQuery – Smashing Magazine". Smashingmagazine.com. 2014-09-04. Retrieved 2016-01-20.
- ↑ "The Simple Intro to SVG Animation". 31 July 2014.
- ↑ "Use Velocity.js to apply slick app-like motion effects | JavaScript | Web Designer". Webdesignermag.co.uk. 2015-01-21. Retrieved 2016-01-20.
- ↑ "Velocity.js". Julian.com. Retrieved 2016-01-20.
- ↑ Team, Awwwards. "Interview with Julian Shapiro". Awwwards.com. Retrieved 2016-01-20.
- ↑ Shapiro, Julian (2014-05-21). "Treat Open Source Like a Startup ★ Mozilla Hacks – the Web developer blog". Hacks.mozilla.org. Retrieved 2016-01-20.
- ↑ Greg Brockman (2014-06-06). "Open-Source Retreat grantees". Stripe.com. Retrieved 2016-01-20.
- ↑ Aurelio De Rosa (2014-06-23). "Easily Improving jQuery Animations". Sitepoint.com. Retrieved 2016-01-20.
- ↑ Remix this video (2014-09-06). "Velocity Motion Designer: Overview". YouTube. Retrieved 2016-01-20.
- ↑ "Contributors to julianshapiro/Velocity". GitHub.