Features
Speed is, of course, not the only reason to use JavaScript—its abundance of features is
equally as important. Let’s run through a few of the notable animation features that are
exclusive to JavaScript.
Page scrolling
Page scrolling is one of the most popular uses for JavaScript-based animation. A recent
trend in web design is to create long webpages that animate new pieces of content into
view as the page is scrolled down.
JavaScript animation libraries, such as Velocity, provide simple functions for scrolling
elements into view:
Click here to view code image
$element.velocity(“scroll”, 1000);
This scrolls the browser toward the top edge of $element over a duration of 1000ms
using Velocity’s "scroll" command. Notice that Velocity’s syntax is nearly identical to
jQuery’s $.animate() function, which is covered later in this chapter.
Animation reversal
Animation reversal is a useful shorthand for undoing an element’s previous animation. By
invoking the reverse command, you’re instructing an element to animate back to its values
prior to its last animation. A common use for reversal is animating a modal dialogue into
view, then hiding it when the user presses to close it.
An unoptimized reversal workflow consists of keeping track of the specific properties
that were last animated on each element that may later be subjected to reversal.
Unfortunately, keeping track of prior animation states in UI code quickly becomes
unwieldy. In contrast, with the reverse command, Velocity remembers everything for
you.
Mimicking the syntax of Velocity’s scroll command, the reverse command is
called by passing "reverse" as Velocity’s first argument:
Click here to view code image
// First animation: Animate an element’s opacity toward
$element.velocity({ opacity: 0 });
// Second animation: Animate back toward the starting opacity value of
$element.velocity(“reverse”);
When it comes to JavaScript’s animation timing control, there’s more than just reversal:
JavaScript also allows you to globally slow down or speed up all JavaScript animations
currently running. You’ll learn more about this powerful feature in Chapter 4, “Animation
Workflow.”