Motion has always been a thing of fascination for us humans. It is a survival instinct that has served us well since ancient times. Today this instinct is used as an opportunity for developers to exploit as a means for mesmerizing visitors and clients.
The animation is one of the most powerful tools in the arsenal of designers and developers to increase the beauty and attract ability of the websites. If implemented properly, it can improve the user interface of the website, the user experience, make it more interactive and all around better.
Although, the first things that come to mind for integrating animation into the site is either CSS or jQuery.
However, there is another big player, VELOCITY.
So, what is velocity?
Well, in simple terms, it’s JavaScript library that is designed to simplify the client-side of website animation. It’s a free, open source and very lightweight library that permit the user to add animation no matter how complex it is.
Despite it being lightweight, it’s a fast and high powered JavaScript animation engine with the same API as jQuery’s $.animate(). It supports all the major browsers and mobile platforms such as iOS and Andrioid.
Velocity uses jQuery’s syntax to make it much easier to create complex animations for HTML and SVG elements. Although it is independent of jQuery, it works much better in conjunction to jQuery.
Why Velocity?
JQuery, the most popular JavaScript, is so popular that it is assumed that almost all web projects use it. However, most experienced developers are now endorsing Velocity simple because it’s simply…. Better.
When it comes to sophistication & performance, Velocity overcomes almost all of the jQuery’s shortcomings, such as layout thrashing, momentary animation freeze. jQuery is very monolithic and produces choppy animation in comparison to Velocity. Velocity is a very rich and allows developers to leverage the element selection power of jQuery.
The difference Velocity makes, in comparison to jQuery, in establishing an easy animation workflow is vast, almost night & day.
Velocity is also on par with CSS in regards to smoothness, speed, and performance; if not better. Velocity can do things CSS can’t.
For example, single page sites are the most trending feature in web designing today. But CSS is incapable for single page scrolling; Velocity isn’t. To perform scrolling with, simply run the “velocity” function with the “scroll” command. Using jQuery alone can be very complicated.
Another feature that is limited in jQuery is Animation Reversal. Where jQuery has to manually animate its properties back to their original values, with velocity, running the reverse command is enough.
One reason people prefer CSS over jQuery is that CSS can mimic real world physics, making things more natural looking. Velocity overcomes this shortcoming and allowing realistic motion, it accepts an easing based on strong physics.
Another thing where Velocity has upper hand over CSS is when creating sequential animation. In CSS, you have to manually calculate time delays and duration for each individual animation. Whereas, in Velocity, simple chaining of animation of one after another is enough.
Velocity has the ability to animate any property; even CSS properties applied to SVG and SVG specific properties, with a single number value.
A good plugin that complements Velocity JavaScript library is Velocity UI pack, which gives access to effects like the bounce in/out, fade in/out etc.
Transitions’ is where Velocity has the upper hand over both CSS and jQuery. CSS forces hardware acceleration during transition and taxes GPU, which results in stuttering and banding in high stress situations. In the case of jQuery, the browser does not know how to optimize transitions in sync with the JavaScript code that manipulates them, due to transitioned not being natively controlled byt JavaScript.
On the other hand, Velocity is light weighted but still packs a powerful punch. It produces smoothly sophisticated animation programming. Velocity was developed keeping in mind that it should be highly optimized across all platforms. Going back, from internet explorer 8 and android 2.3 to the current generation of devices and browsers, animation created using Velocity can be integrated fully and be completely responsive in every major browser and mobile applications.
In short, Velocity is the combination of all the things that are best of jQuery, CSS.
Wrapping Up
We live in a golden age for developers, where tools such as Velocity are freely available.
Animations have the power to breathe life into a website. It’s an alluring quality which turns your static web page into a lively dynamic one.
Velocity has many more features that are just described here, and many more reasons to opt for it instead of CSS or jQuery.
Don’t believe me, try for yourself. Once you go Velocity, there is no other necessity…. Not for creating the best sophisticated animation that is.
And the biggest developers know this too. Companies like WhatApp, Uber, Tumblr, Samsung, HTC, Scribd, Forbes and countless others utilize Velocity to make both then websites and their mobile application dynamic and lively.
If you are still not using Velocity to take your animations to the next level, than you are falling behind even now.
Don’t fall, rise up with Velocity.
