Web Animation using JavaScript: Develop & Design (Develop and Design)

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

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.

    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.