Tech News

Advantages of JavaScript Animation

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

Manage the entirety of user interface (UI) interaction within style sheets, which can quickly become difficult to maintain. 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.) Forgo physics-based motion design, which allows elements on a webpage to behave like objects in the real world. 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.

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.

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.

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

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.

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.

Last word

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.

Related Articles

Leave a Reply

Your email address will not be published.

Back to top button