// Animate with a duration of 1000ms (1 second)
$element.velocity({ opacity: 1 }, { duration: 1000 });
orClick here to view code image
$element.velocity({ opacity: 1}, { duration: “slow” });
The advantage to using the named shorthand durations is that they express the tempo of
an animation (is it slow or is it fast?) when you’re reviewing your code. If you use these
shorthands exclusively, they’ll also naturally lead to more uniform motion design across
your site, since all of your animations will fall into one of three speed categories instead of
each being passed an arbitrary value.
Easing
Easings are the mathematical functions that define how fast or slow animations occur in
different parts of an animation’s total duration. For example, an easing type of "ease-
in-out" indicates that the animation should gradually accelerate (ease in) during the
first part then gradually decelerate (ease out) during the final part. In contrast, an easing
type of "ease-in" produces an animation that accelerates up to a target speed during
the first part of an animation but thereafter remains at a constant speed until the animation
completes. An easing type of "ease-out" is the converse of this: the animation starts
and continues at a constant speed before it gradually decelerates during the final part of
the animation.
Much like the physics-based motion discussed in Chapter 1, “Advantages of JavaScript
Animation,” easings give you the power to inject personality into your animations. Take,
for example, how robotic an animation that uses the linear easing feels. (A linear easing
produces an animation that starts, runs, and ends at the same velocity.) The robotic feel is
the result of an association with linear robotic motion in the real world: Self-guided
mechanical objects typically move in straight lines and operate at constant speeds because
there’s neither an aesthetic nor an organic reason for them to do otherwise.
In contrast, living things—whether it’s the human body or trees blowing in the wind—
never move at constant speed in the real world. Friction and other external forces cause
them to move at varying speeds.
Great motion designers pay homage to organic motion because it gives the impression
that the interface is responding fluidly to the user’s interaction. In mobile apps, for
example, you expect a menu to quickly accelerate away from your fingers when you swipe
it off-screen. If the menu were to instead move away from your fingers at a constant speed
—like a robotic arm—you’d feel as if the swipe merely set off a chain of motion events
that were outside your control.
You’ll learn more about the power of easing types in Chapter 3, “Motion Design
Theory.” For now, let’s run through all of Velocity’s available easing values:
jQuery UI’s trigonometric easings. For a complete listing of these easing equations,
as well as interactive demonstrations of their acceleration profiles, refer to the demos
on easings.net.