Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Faster UI Animations With Velocity JS

From a motion design perspective, is phenomenally static. It’s purposefully dumbed down for the broadest levels of compatibility and user comfort. Facebook’s iOS apps, on the other hand, are fluid. They prioritize the design of motion; they feel like living, breathing apps.

velocity js

This article serves to demonstrate that this dichotomy does not need to exist; websites can benefit from the same level of interactive and performant motion design found on mobile apps.

Further Reading on SmashingMag: Link

Before diving into examples, let’s first address why motion design is so beneficial:

  • Improved feedback loops
    As a UI and UX designer, you should use patterns as much as possible since users will be subconsciously looking for them. Responsive motion patterns, in particular, are the key to pleasurable interactions: When a button has been clicked, do you feel that it has reacted to the pressure of your mouse? When a file has been saved, do you get the strong sense that your data has truly been transferred and stored?
  • Seamless content transitions
    Motion design allows you to avoid contextual breaks; modals fading in and out (as opposed to switching pages entirely) are a popular example of this.
  • Filled dead spots
    When users are performing an unengaging task on your page, you can raise their level of arousal through sound, colors, and movement. Diverting a user’s attention is a great way to make a pot boil faster.
  • Aesthetic flourishes
    For the same aesthetic reasons that UI designers spend hours perfecting their pages’ color and font combinations, motion designers perfect their animations’ transition and easing combinations: Refined products simply feel superior.

In the examples below, we’ll be using Velocity JS5 — a popular animation engine that drastically improves the speed of UI animation. (Velocity.js behaves identically to jQuery’s $.animate() function, while outperforming both jQuery animation and CSS animation libraries.) In particular, this article focuses on Velocity.js’ UI pack6, which allows you to quickly inject motion design into your pages. You may optionally watch this article’s accompanying codecast7 (5 minutes) for a preview of what we’ll cover.

UI Pack Overview Link

After including the UI pack (only 1.8 KB ZIP’ed) on your page, you’ll gain access to UI effects that are organized into two categories:

Callouts Link

Callouts are effects that call attention to an element in order to heighten user experience, such as shaking an element to indicate an input error, flashing an element to indicate that something has changed on the page, or bouncing an element to indicate that a message awaits the user.

See the Pen Velocity.js – UI Pack: Callout8 by Julian Shapiro (@julianshapiro211815129) on CodePen2219161310.

Transitions Link

Transitions are effects that cause an element to appear in or out of view. Every transition is associated with either an “in” or “out” direction. The value of transitions is in revealing and hiding content in a way that’s visually richer than merely animating an element’s opacity. Here’s slideUpIn, a transition that incorporates a subtle slide effect:

See the Pen Velocity.js – UI Pack: Transition11 by Julian Shapiro (@julianshapiro211815129) on CodePen2219161310.

If you’ve paid attention to the evolution of iOS’ UI motion design, you’ll have noticed that over a dozen transition effects help make iOS’ interface pleasurable to interact with. This diversity of transitions is what Velocity.js’ UI pack brings to everyday websites.

Note that, thanks to Velocity.js’ performance, as well as the optimizations afforded by the UI pack, all of the pack’s effects are 100% ready for large-scale production use.

Let’s dive into some simple code examples.

Using The UI Pack Link

Callouts and transitions are referenced via Velocity’s first parameter: Pass in an effect’s name instead of passing in a standard property map. For comparison, here’s the syntax of a normal Velocity.js call, which behaves identically to jQuery’s $.animate():

$elements.velocity({ opacity: 0.5 });

In contrast, below are Velocity.js calls using effects from the UI pack:

/* Shake an element. */

/* Transition an element into view using slideUp. */

Just as with normal Velocity.js calls, UI effects may be chained onto each other and may take options:

/* Call the shake effect with a 2000ms duration, then slide the elements out of view. */
	.velocity("callout.shake", 2000)

Effects from the UI pack optionally take three unique options: stagger, drag and backwards.

Stagger Link

Specify stagger in milliseconds to successively delay the animation of each element in a set by the specified amount. (Setting a stagger value prevents elements from animating in parallel, which tends to lack elegance.)

/* Animate elements into view with intermittent delays of 250ms. */
$divs.velocity("transition.slideLeftIn", { stagger: 250 });

See the Pen Velocity.js – UI Pack: Stagger14 by Julian Shapiro (@julianshapiro211815129) on CodePen2219161310.

Drag Link

Set drag to true to successively increase the animation duration of each element in a set. The last element will animate with a duration equal to the animation’s original value, whereas the elements prior to the last will have their duration values gradually approach the original value.

The result is a cross-element easing effect. (If you’ve ever been wowed by motion typography demos made with After Effects, drag is a key yet subtle component behind their visual richness.)

See the Pen Velocity.js – UI Pack: Drag17 by Julian Shapiro (@julianshapiro211815129) on CodePen2219161310.

Backwards Link

Set backwards to true to animate starting with the last element in a set. This option is ideal for an effect that transitions elements out of view, because the backwards option mirrors the behavior of elements transitioning into view (which, by default, animate in a forward direction, from the first element to the last).

See the Pen Velocity.js – UI Pack: Backwards20 by Julian Shapiro (@julianshapiro211815129) on CodePen2219161310.

Together, these three options bring the power of motion design suites to the Web. When used sparingly, the results are beautiful — so long as you design with user experience in mind:

Designing For UX Link

Spicing up a page with motion design can escalate quickly23. Here are a few considerations to keep in mind:

  • Make them finish quickly
    When applying transitions, developers often make the mistake of letting them run too long, causing users to wait needlessly. Never let UI flourishes slow down the apparent speed of your page. If you have a lot of content fading in, keep the animation’s total duration short.
  • Use an appropriate effect
    For example, don’t use a playful bounce effect on a page that features formal content.
  • Use them sparingly
    Having transitions in every corner of your page is overkill.
  • Avoid extreme repetition
    Avoid transitions of medium-to-long duration in places where they’ll be repeatedly triggered.
  • Experiment
    Find the right duration, stagger, drag and backwards combinations that will produce the right fit for each of your individual animations.

Benefits Of JavaScript-Based Animation Link

Let’s step back and contextualize why powering these types of UI transitions through JavaScript is a good idea in the first place. After all, up until now, these effects have been most commonly applied using pre-made CSS classes from libraries such as Animate.css24:

  • Because the UI pack’s effects behave identically to standard animation calls in Velocity.js, they can be chained and take options. (Doing this with raw CSS can be cumbersome.)
  • The effects have all been optimized for performance (minimal DOM interaction).
  • Elements animated via the UI pack automatically switch to display: none after transitioning out, and back to display: block or inline before transitioning in. (Doing this via CSS requires multiple calls and messy code.)
  • Velocity.js doesn’t leave your text blurry. If you’ve applied transition effects via CSS before, then you’ll know that text can look fuzzy when you’re done animating and haven’t removed the associated class. This doesn’t happen in Velocity.js because its underlying engine completely clears unneeded transformation effects upon completion of an animation.
  • The effects work everywhere but Internet Explorer 8, where they gracefully fall back to simply fading in and out.

With all of these benefits, including the effects’ great performance across all browsers and devices (including older mobile devices), you have no excuse to not start experimenting with motion design on your sites. Enjoy!

Note: Look through Velocity.js’ documentation25 to play around with all of the UI pack’s effects.

Front page image credits: Unsplash.com28

(al, il)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8 ''
  9. 9 ''
  10. 10 ''
  11. 11 ''
  12. 12 ''
  13. 13 ''
  14. 14 ''
  15. 15 ''
  16. 16 ''
  17. 17 ''
  18. 18 ''
  19. 19 ''
  20. 20 ''
  21. 21 ''
  22. 22 ''
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28

↑ Back to top Tweet itShare on Facebook

Julian Shapiro is a startup founder and a developer. His first startup, NameLayer, was acquired by Techstars. His current focus is advancing motion design on the web. Follow him for tweets on UI animation: @Shapiro.

  1. 1

    Thanks for this article. I’ve been reading your posts on this since you released velocity.js. I found this one the most practical for me.

    Thanks for velocity.js too.

  2. 2

    Although JS based transitions are really nice when you need to do some play/pause, backwards, stagger, etc I’m still not convinced about performances.

    I just tried those examples above on my Nexus 4 and the results are really bad. I can get a much better result by using some CSS animations (and Hardware acceleration).

    The best results I got on mobile with JS based animations was by using TweenLite ( which propose much more options than Velocity (but is heavier though). And still it wasn’t as smooth as CSS animations.

    • 3

      You can toggle hardware acceleration in Velocity, and it certainly is smoother with hardware acceleration. By default, it is always enabled for mobile because of the huge difference in performance. However, you should not always force hardware acceleration on desktop unless it is a heavy animation, because it will pull more power and memory to initiate, and is unnecessary in many cases.

      Only a month ago I also swore to CSS3 animation, but now I am happy to mix CSS3 and velocity. Velocity certainly adds better control for programmatic events, and events that are better triggered by JS. For buttons and basic hover stuff, I stick to CSS3. I really like the minimalistic approach of velocity.js, offering practical high-performance animation functionality directly from JS, perfect for UI design. I am using it around the place at …

      • 4


        June 18, 2014 11:16 pm

        I definitely agree with mixing CSS3 and Velocity. It’s a favorable combination since you get to keep simple hover state animations within your stylesheets (not everything should be offloaded to JavaScript) while reserving more intricate animation sequences for Velocity.

        Truthfully, the primary benefit of Velocity is not performance — it’s improving the UI animator’s workflow by simplifying + enriching motion design through advanced features (such as stagger, drag, spring physics, etc.) and an easy chaining/callback/stopping API.

    • 5

      Hey, im not very experienced but i thought i’d give my opinion. CSS 3 animations are great but not as well supported as JS in mobile devices like android 2.0 or so. I’m saying this because of my experience on creating mobile menus. JS would be a safer choice if your animation is part of the UI. If not i agree css3 is a better choice.

  3. 6

    I’m also using GSAP (TweenMax, TimelineMax or Lite) for animations. Also for CSS3 transitions there is this interesting comparison:

    • 7


      June 18, 2014 11:08 pm

      (I don’t think I’ve ever written — or even seen — an animation-related article on the web without at least a handful of GSAP subscribers popping up and systematically plugging GSAP without actually adding any commentary to the article at-hand.)

      Despite this, I do have to say that I love GSAP. It’s what inspired me to build Velocity. It performs similarly to Velocity (there’s a performance comparison over at but differs in implementations, features, file size, and scope. It’s absolutely worth checking out.

      • 8

        Hector Carranza

        October 22, 2014 10:24 pm

        I’ve read your comments to people talking about GSAP in many articles and I think you are a little rude to them.

        Every time someone talks about GSAP your attitude is like: “I’m tired of people who mention GSAP without knowing exactly how its core works”.

        You should be more tolerant about competition.

        BTW, I’m considering velocity for my next project but since you avoid the GSAP vs Velocity talk I can’t make a decision.
        PD: sorry about my bad english.

        • 9

          How can you say he avoids it? He literally pointed to a page on his site exclusively dedicated to a comparison of the two lol.

          While he may come off as harsh, he’s right. This person simply said “I’m using GSAP” but offered no insight into why or if they’d noticed a difference vs velocity, CSS3, or JQuery or any info at all that could contribute to the discussion at hand or spark something further.

  4. 10

    I left this article open for a few hours. When I came back the first demo “Callouts” was doing it’s shake constantly and more rapidly. Also, tabbing through the inputs in the Comment form seem to be off.

    Thanks for sharing this though! This will be very helpful.

  5. 11

    Thanks Julian.

    I am happy to be able to leverage your hard work.

    In your responses to the comments you note that the ideal results involve a combination of JS and CSS. This has been my experience. However it is a brutal benchmarking exercise to find that balance; evangelicalism aside – which I endorse, I wish that weaknesses were part of the documentation. Not to single out velocity, greensock, or any other. But I spend too much time finding weak points and then back-pedalling.

    This feedback is based on a week of benchmarking that could have been spent doing something more marvellous.

    Thanks again for your contributions!

  6. 13

    Hey Julian,

    First of all great article, and great job with Velocity.js,

    Is there an alternative to Velocity.js outside of the jQuery world?

    • 14


      June 26, 2014 9:23 pm

      Hey Robert,

      Velocity will actually be dropping its jQuery dependency VERY soon. Stay on top of updates over at GitHub:

  7. 15

    Caleb Mellas

    June 27, 2014 10:53 pm

    Thanks for sharing Julian! Velocity.js looks great, and I am trying it out in a large ecommerce project I’m working on.

    I do have one question:

    How do I make the element fadeIn to block instead of inline?

    • 16


      June 28, 2014 6:08 am

      Hey Caleb,

      Good question. At the moment, you’ll need to do that manually in a callback. However, I will add in the option to enter your own display option tomorrow. So stay tuned on the GitHub repo!

    • 17

      In case you missed the latest release Julian gracefully provided us with, you can now do exactly this with the extra `{ display: inline }` option tacked on.

      Seems almost like he made a whole section of the docs just for you:

  8. 18

    hi, what are the best way to delete element after animation done?
    I try to achieve this by Promises but have some strange behavior, i see only half of my animation (translateZ: 0, translateX: “200px”, translateY: “-800px”,) after that element is deleted.

    This is my code:
    $.Velocity.animate(value, {
    translateZ: 0,
    translateX: “200px”,
    translateY: “-800px”,
    height: ’10px’,
    width: ’10px’
    }, {
    delay: 100,
    duration: 200
    }).then(function(elements) {

  9. 19

    Yesterday I tried Velocity for the first time and I like the simple workflow on making animations. Good job Julian! From now on, I’m a hangaround in the git rep.

  10. 20

    Spork Schivago

    June 27, 2015 12:15 am

    Hi. I’m new to web design. I know I’m more than likely doing something wrong here. Was hoping for some help. I have a navigation bar that I created following a how-to article I read. When the screen is resized below a certain size or is on a smaller screen, it changes. The nav bar gets replaced by the a bar that just says Menu and has a three horizontally lined bar in the corner. When the user moves their mouse or clicks on this bar, I want a menu to slide out from the left side. When they click the menu again, I want it to go away. I can get this some what with the following code:
    $(function() {
    var pull = $(‘#pull’);
    var menu = $(‘nav ul’);
    var menuWidth = menu.width();

    $(pull).on(‘mouseover click’, function(e) {
    menu.animate ({ width: “toggle”});

    var w = $(window).width();
    if(w >= 840 &&‘:hidden’)) {

    The text comes out okay, however, when it returns (when the user clicks again), the text on the longer words (Transfer Area and Online Menu) break up and create new buttons (For example, there’s a Transfer one and an Area one, etc). It only happens while it’s closing. I’ve tried everything to fix it but don’t know what I’m doing. I’d love to not only get it to work correctly but to use your velocity Javascript instead. When I replace menu.animate with menu.velocity, it does nothing. I’ve tried replacing it with $.velocity, menu.velocity and just velocity. None of them seem to work. I’ve included both javascript files,


    I’ve verified that both files are in my js directory (I have other files I can load just find in there, like jQuery). jQuery gets loaded first. I’ve also tried just including velocity.min.js because I wasn’t sure if I was supposed to have velocity.ui.min.js included as well. Do you have any ideas what I’m doing wrong and how I can fix it? My html code is also attached here:

    Transfer Area
    Online Manual
    Sign in


    Any help would greatly be appreciated. Thank you!

    • 21

      Spork Schivago

      June 28, 2015 6:34 am

      Doesn’t seem to matter. I figured out how to get it to work with jQuery. Perhaps later on when I finish doing what I’m trying to do, I can try this velocity again. Thanks anyway.

  11. 22

    Hello there,
    Sorry about my english in advance, world is not perfect yet :)
    I’m trying hard to workout with velocity. I don’t know why I got that issues, but I can’t run any code with velocity.js
    I asume running velocity is equal as runing jquery, so calling a script src and after on script tags putting the code like on JQuery. BUT Nothing happend. I have try to paste many codepen codes on my Html documents. And making sure the script src is correct, downloading the code or just linking it to you web page.
    I don’t know if there is any php, or web server configuration needed, but I can’t manage to make velocity work.
    I was searching to find any html full code with velocity, instead of codepen, like the code in w3schools that prefectly work by coping paste it on a html doc.
    I just waiting your book arrive and I will continue searching a full code to let me start enjoying velocity. Maybe a first steps easy code to begginers will be apreciate for the first contact.
    Best regards!


↑ Back to top