As a frontend developer, you’re on a constant quest to improve.
Whether it be performance, workflow, or finding that perfect buttery-smooth interface animation – every web project is a chance to level-up and ultimately deliver the highest quality site to your client.
This is why we get so excited when we find a tool that improves something for us, and VelocityJS offers a huge improvement in animation performance when compared with jQuery.
Differences in implementation of common components between jQuery & Velocity
The Classic Slide-Toggle with Velocity JS
If you’re used to relying on jQuery, then you may have used its slideTogglemethod to easily reveal and hide drop-downs or other elements.
Using jQuery:
$('#my-element').click(function(){$('#my-dropdown').slideToggle();});
But with only a few more lines of code, we can have something more performant and versatile.
Using Velocity JS:
$('#my-element').click(function(){var slideDir =$('#my-dropdown').is(':visible')?'slideUp':'slideDown';$('#my-dropdown').velocity(slideDir);});
Here is the Velocity toggle in action (with some extras). It’s a little more code than jQuery’s slideToggle, but offers advantages. On top of a noticeable performance boost, you’ll also be able pass different options (like duration, easing, callbacks, etc..) depending whether the dropdown is being opened or closed.
Animating Page Scroll with Velocity JS
Another common task is enhancing in-page hash links to animate smoothly. With jQuery, you may be familiar with animating the scrollTop property. Velocity doesn’t provide a scrollTop property shim like jQuery, but you’ll probably find the Velocity scroll command more intuitive.
Using jQuery:
$('a[href^="#"]').click(function(){$('html,body').animate({ scrollTop:$(this.hash).offset().top });});
Using Velocity JS:
$('a[href^="#"]').click(function(){$(this.hash).velocity('scroll');});
Here is Velocity’s scroll in action, click the buttons on the header and you’ll be animated to the corresponding section of the page.
Hover Effects With Velocity JS
Animating elements on hover is easy thanks the the hover method in JQuery. It takes 2 functions arguments – the first to run on ‘mouseenter’, and the other to run on ‘mouseleave’. In this case, Velocity doesn’t make the dom manipulation any easier, but does give you versatility that would be much more inconvenient to implement with jQuery only.
jQuery Hover Method
$('.element').hover(function(){//run hover-on animations},function(){//run hover-off animations});
Velocity also provides commands for stopping animations that are running on an element. Like with jQuery, this can be used in situations where the potential exists for multiple animations to queue up inadvertently (…like if someone hovered onto and off an element very quickly).
Animating To an Element’s Current Position
Often times when animating HTML, it makes for sense to think of animating an element from somewhere (offscreen for example) to its default location. Part of Velocity’s magic here is a feature called force-feeding, which allows you to declare 2 values on the property you want to animate. The first being where the animation should start from, and the second is where it will end.
Velocity JS Forcefeeding
$('.element').velocity({ translateY:['-100%','0%']},{options});
This opens up some new possibilities, like making it easier to give an element different in and out behavior. Here’s an example of a Velocity modal overlay that enters from the top of the screen and exits at screen bottom, made much simpler by forcefeeding.
Wrapping Up the Velocity JS Tutorial
We love using Velocity JS because it’s convenient, smaller than other animation libraries, and more performant than jQuery animate. The few examples here barely scratch the surface of what’s possible with Velocity, but it’s good to get a grasp on the basics before moving on to more advanced uses of the library – like sequences and the UIPack, or choreographing your animations with the help of velocity motion designer.
Thanks to Julian Shapiro for building such a nice, well-documented library… and to Stripe who has helped to fund development of Velocity JS.
Join the Discussion