Physics-based motion
The utility of physics in motion design reflects the core principle of what makes for a
great user experience (UX) on your site: interfaces that flow naturally from the user’s
input. Put another way, interfaces that pay tribute to how objects move in the real world.
As a simple yet powerful introduction to physics-based motion Velocity offers an easing
type based on spring physics. (We’ll fully explore the concept of easing in the next
chapter.) With typical easing options, you pass in a string corresponding to a predefined
easing curve (for example, "ease" or "easeInOutSine"). The spring physics easing
type, in contrast, accepts a two-item array.
Click here to view code image
// Animate an element’s width to “500px” using a spring physics easing of
tensions units and 20 friction units
$element.velocity({ width: “500px” }, { easing: [ 500, 20 ] });
The first item in the easing array represents the tension of the simulated spring and the
second item represents friction. A higher tension value increases the total speed and
bounciness of the animation. A lower friction value increases the vibration speed at the tail
end of the animation. By tweaking these values, you can give each animation on your page
a unique movement profile, which helps to reinforce the differentiation between their
individual behaviors.
Maintainable workflows
Designing animation is an experimental process that requires repeated tweaking of timing
and easing values to achieve a uniform feel across the page. Inevitably, just when you’ve
perfected your design, a client will request significant changes. In these situations,
maintainable code becomes critical.
The JavaScript-based solution to this workflow problem is wonderfully elegant, and it’s
covered in depth in Chapter 4, “Animation Workflow.” For now, here’s the short
explanation: There are techniques for chaining together individual JavaScript animations
—all with differing durations, easings, and so on—such that the timing of one animation
does not affect another. This means you can change individual durations without redoing
math and you can go back and easily set animations to run either in parallel or
consecutively.
Wrapping up
When designing animations in CSS, you’re inherently limited to the features that the CSS
specification provides. In JavaScript, because of the very nature of programming
languages, third-party libraries have an infinite amount of logical control over motion
design. Animation engines leverage this to provide powerful features that drastically
improve workflow and expand the possibilities of interactive motion design. That’s what
this book is all about: Designing beautiful animations as efficiently as possible.
The next chapter explains how to use this book’s JavaScript animation engine of choice:
Velocity.js. In mastering Velocity.js, you’ll understand how to leverage the features we’ve
just introduced, and many more.