Web Animation using JavaScript: Develop and Design (2015)

---

You can pass in an object specifying animation options as a second argument:

$element.velocity({ width: "500px", opacity: 1 }, { duration: 400, easing: "swing" });

There’s also a shorthand argument syntax: Instead of passing in an options object as a second argument, you can use comma-separated argument syntax. This entails listing values for duration (which accepts an integer value), easing (a string value), and complete (a function value) in any comma-separated order. (You’ll learn what all of these options do momentarily.)

// Animate with a duration of 1000ms (and implicitly use the default easing value of "swing")
$element.velocity({ top: 50 }, 1000);
// Animate with a duration of 1000ms and an easing of "ease-in-out"
$element.velocity({ top: 50 }, 1000, "ease-in-out");
// Animate with an easing of "ease-out" (and implicitly use the default duration value of 400ms)
$element.velocity({ top: 50 }, "ease-out");
// Animate with a duration of 1000ms and a callback function to be triggered upon animation completion
$element.velocity({ top: 50 }, 1000, function() { alert("Complete.") });

This shorthand syntax is a quick way of passing in animation options when you only need to specify the basic options (duration, easing, and complete). If you pass in an animation option other than these three, you must switch all options to the object syntax. Hence, if you want to specify a delay option, change the following syntax:

$element.velocity({ top: 50 }, 1000, "ease-in-out");

to this syntax:

// Re-specify the animation options used above, but include a delay value of 500ms
$element.velocity({ top: 50 }, { duration: 1000, easing: "ease-in-out", delay: 500 });

You can’t do this:

// Incorrect: Divides animation options between the comma-separated syntax and the object syntax
$element.velocity({ top: 50 }, 1000, { easing: "ease-in-out", delay: 500 });

Properties

There are two differences between CSS-based and JavaScript-based property animation.

First, unlike in CSS, Velocity accepts only a single numeric value per CSS property. So, you can pass in:

$element.velocity({ padding: 10 });

or

$element.velocity({ paddingLeft: 10, paddingRight: 10 });

But you can’t pass in:

// Incorrect: The CSS property is being passed more than one numeric value.
$element.velocity({ padding: "10 10 10 10" });

If you do want to animate all four padding values (top, right, bottom, and left), list them out as separate properties:

// Correct
$element.velocity({
paddingTop: 10,
paddingRight: 10,
paddingBottom: 10,
paddingLeft: 10
});

Other common CSS properties that can take multiple numeric values include margin, transform, text-shadow, and box-shadow.

Breaking up compound properties into their sub-properties for the purposes of animation gives you increased control over easing values. In CSS, you can specify only one property-wide easing type when animating multiple sub-properties within the parent padding property, for example. In JavaScript, you can specify independent easing values for each sub-property—the advantages of this will become apparent during the discussion of CSS transform property animation later in this chapter.

Listing out independent sub-properties can also make your animation code easier to read and easier to maintain.

The second difference between CSS-based and JavaScript-based property animation is that JavaScript properties drop the dashes between words and all words past the first must be capitalized. For example, padding-left becomes paddingLeft, and background-colorbecomes backgroundColor. Further note that JavaScript property names should not be in quotes:

// Correct
$element.velocity({ paddingLeft: 10 });
// Incorrect: Uses a dash and doesn't capitalize
$element.velocity({ padding-left: 10 });
// Incorrect: Uses quotes around the JavaScript-formatted property name
$element.velocity({ "paddingLeft": 10 });

Values

Velocity supports the px, em, rem, %, deg, vw, and vh units. If you don’t provide a unit type with a numeric value, an appropriate one is automatically assigned based on the CSS property type. For most properties, px is the default unit, but a property that expects a rotation angle, such asrotateZ for example, would be automatically assigned the deg (degree) unit:

$element.velocity({
top: 50, // Defaults to the px unit type
left: "50%", // We manually specify the % unit type
rotateZ: 25 // Defaults to the deg unit type
});

Explicitly declaring unit types for all property values increases your code’s legibility by making the contrast between the px unit and its alternatives more obvious when quickly eyeballing your code.

Another advantage of Velocity over CSS is that it supports four value operators that can be optionally prefixed to a property value: +, -, *, and /. These directly correspond to their math operators in JavaScript. You can combine these value operators with an equals sign (=) to perform relative math operations. Refer to the inline code comments for examples:

$element.velocity({
top: "50px", // No operator. Animate toward 50 as expected.
left: "-50", // Negative operator. Animate toward -50 as expected.
width: "+=5rem", // Convert the current width value into its rem equivalent and add 5 more units.
height: "-10rem", // Convert the current height value into its rem equivalent and subtract 10 units.
paddingLeft: "*=2" // Double the current paddingLeft value.
paddingRight: "/=2" // Divide the current paddingLeft value into two.
});

Velocity’s shorthand features, such as value operators, retain animation logic entirely within the animation engine. This not only keeps the code more concise by eliminating manual value calculation, but also improves performance by telling Velocity more about how you plan to animate your elements. The more logic that is performed within Velocity, the better Velocity can optimize your code for higher frame rates.

Chaining

When multiple Velocity calls are chained back-to-back on an element (or a series of elements), they automatically queue onto one another. This means that each animation begins once the preceding animation has completed:

$element
// Animate the width and height properties
.velocity({ width: "100px", height: "100px" })
// When width and height are done animating, animate the top property
.velocity({ top: "50px" });

Using Velocity: Options

To round out this introduction to Velocity, let’s run through the most commonly used options: duration, easing, begin and complete, loop, delay, and display.

Duration

You can specify the duration option, which dictates how long an animation call takes to complete, in milliseconds (1/1000th of a second) or as one of three shorthand durations: "slow" (equivalent to 600ms), "normal" (400ms), or "fast" (200ms). When specifying a duration value in milliseconds, provide an integer value without any unit type:

// Animate with a duration of 1000ms (1 second)
$element.velocity({ opacity: 1 }, { duration: 1000 });

or

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

$element.velocity({ width: "100px" }, "easeInOutSine");

CSS’s easings: "ease-in", "ease-out", "ease-in-out", and "ease" (a subtler version of "ease-in-out").

$element.velocity({ width: "100px" }, "ease-in-out");

CSS’s Bézier curves: The Bézier curve easing allows complete control over the structure of an easing’s acceleration curve. A Bézier curve is defined by specifying the height of four equidistant points on a chart, which Velocity accepts in the format of a four-item array of decimal values. Visit cubic-bezier.com for an interactive guide to creating Bézier curves.

$element.velocity({ width: "100px" }, [ 0.17, 0.67, 0.83, 0.67 ]);

Spring physics: This easing type mimics the bouncy behavior of a spring that’s been stretched then suddenly released. As with the classical physics equation that defines the motion of a spring, this easing type lets you pass in a two-item array in the form of [ tension, friction ]. A higher tension (default: 500) increases total speed and bounciness. A lower friction (default: 20) increases ending vibration speed.

$element.velocity({ width: "100px" }, [ 250, 15 ]);

"spring" easing is a predefined implementation of the spring physics easing that’s handy to use when you don’t want to experiment with tension and friction values.

$element.velocity({ width: "100px" }, "spring");

Remember that you can also pass in the easing option as an explicitly defined property in an options object argument:

$element.velocity({ width: 50 }, { easing: "spring" });

Do not be overwhelmed by the number of easing options available to you. You’ll most often rely on the CSS easing types and the “spring” easing, which suit the vast majority of animation use cases. The most complex easing type, the Bézier curve, is most often employed by developers who have a highly specific easing style in mind and aren’t afraid to get their hands dirty.