This chapter is from the book
This chapter is from the book
This chapter is from the book
Design techniques
The techniques discussed so far in this chapter will improve your workflow during the coding phase of motion design. The techniques covered in this section focus on the design phase, where you’re still experimenting to find the perfect animation that fits your UI. This phase requires a lot of creativity and a lot of repetition, and is accordingly ripe for workflow improvements.
Timing multipliers
The first design technique is to use a global timing multiplier. This consists of sprinkling in a multiplier constant against all of your animations’ delay and duration values.
Start by defining your global timing multiplier (arbitrarily designated as M for multiplier):
var M = 1;
Then, bake the multiplier into the duration and delay option values within each animation call:
$element1.animate({ opacity: 1 }, { duration: 1000 * M });
$element2.velocity({ opacity: 1 }, { delay: 250 * M });
NOTE
if you use SASS or LESS, which provide support for variable usage within stylesheets, this technique applies equally to CSS animations!
Embedding a multiplier constant will help you quickly modify the M constant in one location (presumably at the top of your style.js) in order to quickly speed up or slow down all of the animations across your page. Benefits of such timing control include:
- Slowing down animations to perfect the timing of individual animation calls within a complex animation sequence. When you’re constantly refreshing your page in order to tweak a multi-element animation sequence to perfection, seeing the sequence in slow motion makes it significantly easier to assess how individual elements interact with one another.
- Speeding up animations when you’re performing repetitive UI testing. When you’re testing a site for purposes other than animation, evaluating the end state of UI animations (how elements wind up) is more important than testing the animations’ motion. In these situations, it saves time and reduces headaches to speed up all the animations across your page so you’re not repeatedly waiting for your animations to play out on each page refresh.
Velocity has a handy implementation of this functionality called mock, which functions as a behind-the-scenes global multiplier so you don’t have to sprinkle in the M constant by hand. Like the example shown above, mock multiplies both the duration and the delay values. To turn mock on, temporarily set $.Velocity.mock to the multiplier value you want to use:
// Multiply all animation timing by 5
$.Velocity.mock = 5;
// All animations are now time-adjusted
// The duration below effectively becomes 5000ms
$element.velocity({ opacity: 1 }, { duration: 1000 });
Velocity’s mock feature also accepts a Boolean value: setting mock to true sets all durations and delays to 0ms, which forces all animations to complete within a single browser timing tick, which occurs every few milliseconds. This is a powerful shortcut for quickly turning off all animations when they’re getting in the way of your UI development and testing.
Use Velocity Motion Designer
Velocity Motion Designer (VMD) was crafted with the sole purpose of helping developers streamline the creation phase of motion design. VMD is a bookmarklet that you load onto a page in order to design animations in real time. It allows you to double-click elements to open a modal that lets you specify animation properties and options for that element. You then hit Enter on your keyboard to watch the animation play out immediately—without a page refresh.
)
Once you’ve designed all your element animations exactly the way you want them, you can export your work into one-for-one Velocity code, which you can place immediately into an IDE for use in production. (The resulting code is also fully compatible with jQuery.)
Ultimately, VMD saves countless hours of development time by preventing constant IDE and browser tab switching and repeated UI state retriggering. Further, it streamlines the designer-to-developer workflow by allowing the two teams to work alongside one another in real time: with VMD, designers can implement motion design without having to familiarize themselves with a site’s JavaScript or CSS. They can simply hand off the exported Velocity code to the developers to integrate into the codebase at their discretion.
VMD is a highly visual tool—visit VelocityJS.org/#vmd to see the walkthrough video.