Velocity.js
If we go by the definition of technological watch, writing about velocity would not be the first subject that would come to mind. As matter of fact, it has been around for a while but little do we know about this library. Therefore, allow me to reintroduce you to Velocity.js.
So, what is Velocity.js?
Velocity is a free, lightweight library that lets us easily add animations to our sites, ranging from the simplest of animations to the most complex. Velocity outperforms all other animation libraries, is simple to use, and mimics the syntax of the most popular JavaScript library, jQuery.
It offers blazing speed, featuring scrolling, color animation, loops, transforms, easings and SVG support. What’s more, it uses the exact same API as jQuery $.animate(), so it can be plugged into project right away with no additional work. All it needs to be done is to replace all instances of $.animate() with $.velocity(). There is also a special UI pack that offers access to a number of pre-registered animation effects that have us animating our DOM in no time.
It’s also well supported by all browsers and devices. Velocity is best used with jQuery as stated here above, but it does not have to be.
How to set up velocity.js?
Adding velocity.js to websites is as simple as referencing it from a content delivery network (CDN). Either that, or download the code from the Velocity website (copy-paste the code into a text-editor, and save it as « velocity.min.js »).
Either way, include the Velocity file using a <script> tag before the closing body tag document in html, and before the JavaScript file (« script.js »):
<body>
…
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.1.0/velocity.min.js"></script>
<script src="script.js"></script>
</body>How to run the velocity function?
Velocity.js syntax
The common syntax used to do an animation with Velocity.js is this:
$element.velocity(
{ property1: value,
property2: value },
{ option1: value,
option2: value }
);or, without jQuery:
velocity(document.getElementById("myelement",
{ property1: value,
property2: value },
{ option1: value,
option2: value }
);Assuming there is an element with ID myelement on the page.
Arguments
Velocity accepts one or more arguments. The first argument is mandatory. It would specify a group of properties that Velocity.js must animate. Velocity has predefined commands (fadeIn and fadeout, slideUp and slideDown, scroll, opacity, hook, transforms, etc)
Note: The order of properties in a data object are irrelevant. Everything in the animation happens at the exact same time.
The second argument, which is optional, is also an object. It influences how the animation should be done. It contains animation options such as duration, easing, and delay, and complete (a function that executes after the animation completes):
// Animates an element to a width of 300px over 500ms after a 1000ms delay.$element.velocity({width:"300px"},{duration500,delay:1000});
Property values
Velocity.js comes with default values for all options, so you only have to specify option overrides. For example, to animate the opacity of an element:
$element.velocity(
{ opacity: 0.5 }, { duration: 1000 }
);If a unit type is not provided, Velocity will assume one for us (normally ms, px, and deg). If the value contains anything other than a numerical value (%, or letters), then it is highly recommended to use quotes.
// Okay, only numerical value$element.velocity("scroll",{duration:500}) // Okay, uses quotes$element.velocity("scroll",{duration:"500ms"})
Let’s quickly talk about a nice characteristic of Velocity, it is called:
Chaining
Creating a series of sequential animations in CSS requires manually calculating timing delays and durations for each individual animation. And if any one of these steps needs to be changed, all the animations proceeding this step must be recalculated and changed as well.
Velocity allows for simple chaining of animations one after another, just by calling the velocity function one after the other:
$element
.velocity({opacity:0.5},{duration:1000})
.velocity({opacity:1.0},{duration:1000});
In this example, the element opacity will fade out to 50%, then back in again to 100%, and the second animation will not start before the first one is finished.
Features
Hereafter few pretty nice and cool animation that can be done with velocity:
Looping animations with Velocity.js
An animation can be executed more than once by looping it. When a loop property is added, the animation will execute in and out for every count in the loop. For instance, this will have the element fade out and fade back in twice:
$element.velocity({opacity:0.1},{duration:500,loop:2});
Setting loop to true, will cause infinite looping. If we want a pause between cycles, we can add the option delay: 100 (to wait 100ms between loops). When used without a loop, delay will cause the animation to pause for the specified time before it starts.
Animation reversal
In jQuery, to revert back to the element’s original state before the animation started, we have to manually animate its properties back to their original values. For example:
With jQuery:
// Animate a 100px tall element to a height of 200px over 500ms$element.animate({height:"200px"},{duration:500}); // Animate the element back to its original height value of 100px over 500ms$element.animate({height:"100px"},{duration:500});
With Velocity, however, we just have to run the reverse command:
// Animate a 100px tall element to a height of 200px over 500ms$element.velocity({height:"200px"},{duration:500}); // Reverse previous animation – animate back to the original height of 100px over 500ms $element.velocity("reverse");
These are just a couple of velocity’s features and commands. Velocity offers a lot more which will enable us to make different pretty cool animations. You can mix them up if needed, like combining both chaining and animation reversal.
Therefore, I encourage you to check out its documentation and then experiment.
Conclusion
CSS gives us already a pretty solid tools to animate our sites. Adding velocity.js to that toolbox will only enhance our way to animate even quickly. Velocity is one of the best JavaScript animation library out there, if not the best.
Happy animating!
