Animating the DOM with Anime.js

If you're looking for a fast and lightweight animation library, Anime.js by Julian Garnier is an option you'd like to consider.

This is the first of a series of articles about tools for dynamic DOM animation, including SVG graphics. I don't plan to include specialized canvas-WebGL animation libraries or SVG-specific animation libraries. However, if a library is great at animating HTML elements on a webpage (and ideally also SVG graphics), I will consider it for inclusion in this series.

It is not my intention to dissect each library and delve deeply into its code. Instead, I am going to approach each library from the perspective of someone who mainly works with CSS but would like to explore what JavaScript has to offer when it comes to animating the DOM. Therefore, I will be looking for a tool that is great at manipulating the DOM by dynamically adding and removing CSS styles and/or classes for the purposes of animation by means of a syntax that feels familiar to a CSS developer.

Animation on the Web

As Sarah Drasner explains, when talking about web animation, a useful distinction is between user interface/user experience animation and standalone animation.

Research shows how human perception understands the world better on the basis of moving images. This means that we can understand and assimilate information better when it is presented to us in a moving scene rather than in the form of an image or even a series of static images.

UI/UX animation serves the purpose of aiding users as they navigate a website, absorb information on a webpage, or perform a specific task, e.g., signing up for a newsletter, adding an item to the shopping cart, etc.

By contrast, standalone animation is...

Used to illustrate concepts in the body of the page, either alongside or on it's own.

Sarah Drasner — CSS Conference slides

Here's an amazing CodePen demo by Sarah to illustrate the point.

The distinction is important because when you're animating user interfaces, your aim is to help users perform those tasks which go towards meeting the website's goals. Instead, when creating a standalone animation, you set out to express a certain concept as fully as possible.

That said, both kinds of animation are made for people to enjoy. That's why, when creating your animations, things like performance and accessibility make all the difference between an animation that delights and one that annoys or even hurts users.

Why Use JavaScript for Animation?

Today CSS offers transitions and animations to add movement to the web. However, when it comes to animation on the web, JavaScript is still a big player. Why is this the case? At last we can run an animation using CSS alone, why on earth would anyone need JavaScript to do the job?

To help you decide between CSS and JavaScript animation, consider the following distinctions by Rachel Nabors.

Animation can be:

• static: the animation runs from the beginning through to the end without decision-making logic. CSS loaders are a case in point. You can create this kind of animation with CSS alone;
• stateful: a sidebar that opens and closes at the click of a button is a common example of this type of animation. You can build this using CSS and a tiny bit of JavaScript to add and remove the CSS classes responsible for keeping track of the state of the element in your animation;
• dynamic: this kind of animation can have different outcomes, which depend on various factors like user interaction, DOM events, the state of the animation of other elements on the same document, etc. You can't create dynamic animations with just CSS – in this context, JavaScript is most likely your best friend.

Besides dynamic animations, you could turn to JavaScript for a helping hand with your animations if you come across any of the circumstances below:

• you need to chain or stagger your animations on more than a few elements. In this case, each subsequent animation needs to occur after the previous one has completed. You can do this with CSS alone by coordinating the delay property on each animated element. However, if you need to change even just one value, making the necessary adjustments on all the chained elements can quickly become unmanageable;
• you are animating SVG graphics. In this case, the drawback is that CSS animation on SVG is not consistently supported across browsers;
• if your project needs to support older browsers where CSS animation is not available, resorting to a robust JavaScript solution will make your animations more widely available.

If you'd like to read more on this topic, Myth Busting: CSS Animations vs. JavaScript by Jack Doyle, author of the Greensock Animation Platform, makes some good points.

An Up and Coming Alternative: the Web Animations API

The W3C has been working on a specification that brings together CSS and SVG animation under a unified language without any need for external JavaScript libraries. The API is known as Web Animations and works great for the kind of dynamic animations for which CSS is less suited. You can read this helpful introduction to the Web Animations API (AAPI) by Dudley Storey here on your very own SitePoint.

Work on the Web Animations API has been going on at a sustained pace and a polyfill is also available for browsers that don't provide native support for the API.

All this sounds good and I actively encourage experimenting with the WAAPI. However, at the time of writing, browser support is sketchy and the specification might still change in the future. So, if the WAAPI is not a good fit for your project right now, you can turn to JavaScript animation libraries to get the job done.

Animation Libraries for Dynamic DOM Animation

There is a wide choice of JavaScript animation libraries for you to try out. At the time of writing GreenSock, also known as GSAP (GreenSock Animation Platform), and Velocity.js are among the big players.

Both are fantastic, user-friendly tools and I will talk about them in subsequent articles. However, I'd like to kick off this series with Anime.js, a new JavaScript animation library that's been gaining some significant traction.

Anime's Main Features

The name Anime is Japanese for hand-drawn or computer animation (Japanese: アニメ)

As for its features, Anime.js...

is a flexible yet lightweight JavaScript animation library. It works with CSS, Individual Transforms, SVG, DOM attributes and JS Objects.

Anime.js supports the following browsers:

• Chrome
• Safari
• Opera
• Firefox
• Internet Explorer 10+

With All Animation Libraries Available, Why Anime?

The answer to this question is best left to Anime's author as he explains why he came up with Anime.js when there's something as powerful as GSAP around:

GSAP can do a lot more than Anime. But it’s also way more heavy. My goal with this library was to keep the API simple as possible, focus on the things I really need (multiple timings, easings, playback controls…) while keeping the code super lightweight (9KB minified).

Hacker News

In short, for dynamic animations of HTML and SVG elements which don't require all of the features GSAP and other big libraries offer out of the box, Anime.js can be an excellent option for your project.

Continue reading %Animating the DOM with Anime.js%

by Maria Antonietta Perna via SitePoint