Javascript Vs. Css : Which is best for animation?

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

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

JavaScript Vs. Jquery Animations

Most of the time JavaScript and jQuery are falsely conflated. In reality, 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.

Why Use Javascript?

Speed is, of course, not the only reason to use JavaScript—its abundance of features is
equally as important. A few of the notable animation features that are
exclusive to JavaScript are,

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 web pages that animate new pieces of content into
view as the page is scrolled down.
JavaScript animation libraries, such as Velocity, provide awesome support for this.

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.

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.

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.


This was a pretty long article, hope you enjoyed reading it. What type of animations do you like to use? Tell in the comments below.

---