Faster UI Animations With Velocity.js

Advertisement

From a motion design perspective, Facebook.com 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.

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.

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.js1 — 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 pack2, which allows you to quickly inject motion design into your pages. You may optionally watch this article’s accompanying codecast3 (5 minutes) for a preview of what we’ll cover.

UI Pack Overview

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

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: Callout4 by Julian Shapiro (@julianshapiro17141185) on CodePen18151296.

Transitions

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: Transition7 by Julian Shapiro (@julianshapiro17141185) on CodePen18151296.

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

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. */
$elements.velocity("callout.shake");

/* Transition an element into view using slideUp. */
$elements.velocity("transition.slideUpIn");

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. */
$elements
	.velocity("callout.shake", 2000)
	.velocity("transition.slideDownOut");

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

Stagger

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: Stagger10 by Julian Shapiro (@julianshapiro17141185) on CodePen18151296.

Drag

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: Drag13 by Julian Shapiro (@julianshapiro17141185) on CodePen18151296.

Backwards

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: Backwards16 by Julian Shapiro (@julianshapiro17141185) on CodePen18151296.

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

Spicing up a page with motion design can escalate quickly19. 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

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.css20:

  • 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’ documentation21 to play around with all of the UI pack’s effects.

Links

Front page image credits: Unsplash.com24

(al, il)

Footnotes

  1. 1 http://velocityjs.org
  2. 2 http://velocityjs.org/#uiPack
  3. 3 https://www.youtube.com/watch?v=CdwvR6a39Tg&hd=1
  4. 4 'http://codepen.io/julianshapiro/pen/Fybjq/'
  5. 5 'http://codepen.io/julianshapiro'
  6. 6 'http://codepen.io'
  7. 7 'http://codepen.io/julianshapiro/pen/aLhFC/'
  8. 8 'http://codepen.io/julianshapiro'
  9. 9 'http://codepen.io'
  10. 10 'http://codepen.io/julianshapiro/pen/mqsnk/'
  11. 11 'http://codepen.io/julianshapiro'
  12. 12 'http://codepen.io'
  13. 13 'http://codepen.io/julianshapiro/pen/lxfie/'
  14. 14 'http://codepen.io/julianshapiro'
  15. 15 'http://codepen.io'
  16. 16 'http://codepen.io/julianshapiro/pen/fEKsw/'
  17. 17 'http://codepen.io/julianshapiro'
  18. 18 'http://codepen.io'
  19. 19 https://www.youtube.com/watch?v=FONN-0uoTHI
  20. 20 https://github.com/daneden/animate.css
  21. 21 http://velocityjs.org/#uiPack
  22. 22 https://github.com/julianshapiro/velocity
  23. 23 http://codepen.io/collection/tIjGb/
  24. 24 http://unsplash.com/

↑ Back to topShare on Twitter

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.

Advertising
  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.

    10
  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 (http://www.greensock.com/tweenlite/) which propose much more options than Velocity (but is heavier though). And still it wasn’t as smooth as CSS animations.

    3
    • 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 mjau-mjau.com …

      6
      • 4

        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
    • 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.

      -2
  3. 6

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

    -4
    • 7

      (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 VelocityJS.org) but differs in implementations, features, file size, and scope. It’s absolutely worth checking out.

      7
      • 8

        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.

        0
  4. 9

    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.

    4
  5. 10

    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!

    -1
  6. 12

    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?

    0
    • 13

      Hey Robert,

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

      2
  7. 14

    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?

    1
    • 15

      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!

      1
    • 16

      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: http://julian.com/research/velocity/#fade

      2
  8. 17

    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) {
    $(elements).remove();
    });

    0
  9. 18

    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.

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top