Menu

Velocity.js for designers

Written by on 6 comments

At Studio Wolf we’re always trying to find the right balance between Javascript and CSS. For animations, it looked like CSS was winning the battle. At least, if you compare CSS animations with the ones jQuery produces. Recently we started working on our new website and decided to experiment with the Velocity.js animation engine.

Velocity JS for designers

Why we looked further than CSS

CSS animations allowed truly smooth animations for the first time, especially on mobile. CSS offloads animation logic to the browser, which is efficient and automatically enabled hardware acceleration. Unfortunately, there are some shortcomings as well:

  • They don’t work in Internet Explorer below version 10. We probably shouldn’t pay to much attention to this one.
  • CSS animations can only be started from Javascript by adding a class to a DOM element. Animations cannot be stopped, reversed or chained based on user interaction.
  • CSS animations do not provide callbacks when animations are finished. In fact, CSS doesn’t give you any feedback on the status. If you want to perform some Javascript after the animation you have to, well, kind of guess when its finished.
  • CSS animations don’t scale. Say, for example, that you want your menu items to fade in one by one, you need to write a separate transition for every menu item.

Of course, with a few hacks, you can build your way around. But it’s far from perfect.

Since animations are getting more important in the profession of interface design, we kept our eyes open for a better alternative. That’s where Velocity.js came around.

Velocity.js

Velocity.js is a 7kb Javascript animation framework by Julian Shapiro. The framework essentially uses the same API as jQuery’s well known $.animate(). The framework offers a lot of possibilities for animations and transitions. And with the UI pack (which is only 1.8kb!) the basic framework can be extended with a lot of extra UI effects.

Velocity.js makes smart choices on how to render your animations: should the browser use hardware acceleration or simply stick with the good old Javascript animations. David Walsh can tell you more about this subject.

Because Velocity.js is Javascript driven, its gives you great amounts of freedom coming in the form of callbacks and possibilities to control your animations dynamically.

In short, one can say that Velocity.js is the best of jQuery, jQuery UI, and CSS transitions combined.

It’s simple!

Yes, dear designers. It’s not that hard. So how do you start?

You can use Velocity.js in combination with the old trusted jQuery like so:

Basic animations

$div.velocity('fadeIn', {duration: 500, easing: easeOut, delay: 30});

The first argument is the effect, which is, a preregistered effect or just a literal object of CSS values, to which you want to animate.

The second argument is an options object. Here you can specify options like delay, easing, duration, looping, and so forth.

CSS values

Transition all the things! You can put multiple CSS values in one animation:

/* Rotate 45 degrees, transition the color to blue, and slide the div down a distance of 50rem, yes, Velocity works with REMs */
$div.velocity({ rotateZ: '45deg', 'font-color': 'blue', translateX: '50rem' }, {duration: 500});

Chaining and sequencing

Sometimes you want to chain your animations, like so:

$element
/* Animate the width property. */
.velocity({ width: 75 })
/* Then, when finished, animate the height property. */
.velocity({ height: 0 });

If you use the UI pack, you can also sequence effects (you need the UI pack for this):

/* Create an array of animations */
var mySequence = [
  { elements: $element1, properties: { translateX: 100 }, options: { duration: 1000 } },
  { elements: $element2, properties: { translateX: 200 }, options: { duration: 1000 } },
  { elements: $element3, properties: { translateX: 300 }, options: { duration: 1000 } }
];

/* Run the sequence */
$.Velocity.RunSequence(mySequence);

Stagger

Under stagger Velocity.js understands a waterfall effect. Above we talked about menu-items that you might want to fade in one by one. You can use the stagger options for that:

$navItems.velocity('fadeIn', {stagger: 150, duration: 500});

Callback

And last but not least, callbacks ladies and gentlemen. Velocity.js provides callback for the beginning, the end, and as well during the progress of an animation. Let’s take a look at a callback when an animation is finished:

$div.velocity('fadeIn', {duration: 500, complete: function() {
  alert('I’m done!');
}});

Retrospect

Velocity.js gives you way more control of your transitions and animations while keeping the CSS advantages. Actually Velocity.js gives you more:

  • Velocity.js doesn’t blur your text after a transition. With CSS transitions you may end up with blurry text if you don’t remove the class that animated the DOM element.
  • Velocity.js works in almost any browser. Too fancy effects for a browsers? Velocity.js degrades to simple fade effects.
  • Do you know you can mock animation with Velocity.js? Just put $.Velocity.mock = 10; in your script to slow all animations down by a factor of 10. Easily fine-tune your animations.

Make sure to check the Velocity.js page for documentation and all features. Happy animating!

Check how we work — Liked this post? See how we put it to practice.

Reader comments

  • ‘ CSS animations can only be started from Javascript by adding a class to a DOM element. Animations cannot be stopped, reversed or chained based on user interaction.’

    We can control css animations playback using animation-play-state property https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state

    As well as reverse https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction

    We can even trigger and control them with css on user interaction primitives like hover, checked etc.

    by Timur
  • Ha thanks! Didn’t know that. It’s good to know that animation-play-state and animation-direction is still quite experimental.

    I’ll give it a try soon.

    by Tim Sluis
  • In one of the examples, you use:

    $div.velocity({ rotateZ: ’45deg’, font-color: ‘blue’, translateX: ’50rem’ }, {duration: 500});

    But because font-color contains a dash (-), you need to wrap the key like so: ‘font-color’.

    by richadr
  • Thanks RichardR, changed it.

    by Tim Sluis
  • Thanks for sharing, how do you loop a sequence after its finish? Thanks

    by ivan
  • I would have the same question as posted by Ivan (June 22, 2016)…how do you loop a sequence after it’s finished?

    by Mountaingal
  • We won't publish your e-mail address, we only use it for verification purposes.

Related blogs

  • Who dares? Workspace for rent at a wolf pack

    by Aljan Scholtens studio-wolf
  • Refresh: the meetup for designers and front end developers

    by Aljan Scholtens studio-wolf
  • Whitespace: the most important design tool

    by Kris de Jong design
  • How social media got our wolf back

    by Tim Sluis studio-wolf
  • Story telling culture

    by Tim Sluis studio-wolf

Dive into history! — Show all 54 posts in 6 years.