Advantages of JavaScript Animation - Web Animation using JavaScript: Develop and Design (2015)

Web Animation using JavaScript: Develop and Design (2015)

Chapter 1. Advantages of JavaScript Animation

In this chapter, we compare JavaScript to CSS for the purposes of animation, and introduce the unique features and workflow advantages provided by JavaScript.

In short, we provide the context needed to help you understand everything you’ll learn about JavaScript in this book.

JavaScript vs. CSS animation

There’s a false belief in the web development community that CSS animation is the only performant way to animate on the web. This misconception has led many developers to abandon JavaScript-based animation altogether, forcing them to

Image Manage the entirety of user interface (UI) interaction within style sheets, which can quickly become difficult to maintain.

Image Sacrifice real-time animation timing control, which is achievable only within JavaScript. (Timing control is necessary for designing animation into UIs that respond to a user’s drag input, like those found in mobile apps.)

Image Forgo physics-based motion design, which allows elements on a webpage to behave like objects in the real world.

Image Lose support for older browser versions, which remain popular throughout the world.

JavaScript-based animation is actually often as fast as CSS-based animation. CSS animation is mistakenly considered to have a significant leg up because it’s most often compared to jQuery’s animation features, which are in fact very slow. However, alternative JavaScript animation libraries that bypass jQuery entirely deliver fantastic performance by streamlining their interaction with a page.


Image Note

One library of note, which we’ll be using throughout this book, is Velocity.js. It’s lightweight yet incredibly feature rich, and it mirrors jQuery’s animation syntax to help eliminate the learning curve.


Of course, CSS is perfectly suited for hover state animations (turning a link blue when the mouse is positioned over it, for example), which are very often the extent to which basic webpages include animation. CSS transitions fit seamlessly into existing stylesheets, allowing developers to avoid bloating their pages with unnecessary JavaScript libraries. What’s more, CSS animation delivers blazing performance out of the box.

But this book will demonstrate why JavaScript is often the superior choice for animations beyond simple hover state animations.

Image

Great performance

JavaScript and jQuery are falsely conflated. JavaScript animation is fast. jQuery slows it down. Despite jQuery being tremendously powerful, it wasn’t designed to be a high-performance animation engine. It has no mechanism to avoid “layout thrashing,” in which a browser becomes overtasked with layout processing work while it’s in the process of animating.

Further, because jQuery’s code base serves many purposes beyond animation, its memory consumption triggers garbage collections within the browser, causing animations to stutter unpredictably. Lastly, due to decisions made by the jQuery team in the noble pursuit of helping novice users avoid sabotaging their UI with bad code, jQuery forgoes the recommended practice of using the requestAnimationFrame function, which browsers make available to drastically improve frame rates for web animation.

JavaScript animation libraries that bypass jQuery entirely deliver fantastic performance by streamlining their interaction with a page. One library of note, which we’ll be using throughout this book, is Velocity.js. It’s lightweight, yet incredibly feature rich, and it mirrors jQuery’s animation syntax to help eliminate the learning curve.

This is a topic we’ll explore in-depth in Chapter 7, “Animation Performance.” By learning the nuances of browser rendering performance, you’ll gain a foundation on which to build reliable animations for all browsers and devices, regardless of their individual processing power.

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:

$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 thereverse 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:

// First animation: Animate an element's opacity toward 0
$element.velocity({ opacity: 0 });
// Second animation: Animate back toward the starting opacity value of 1
$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.”

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.

// Animate an element's width to "500px" using a spring physics easing of 500 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.