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.
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.
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;
- 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
delayproperty 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;
An Up and Coming Alternative: the Web Animations API
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.
Animation Libraries for Dynamic DOM Animation
Anime’s Main Features
The name Anime is Japanese for hand-drawn or computer animation (Japanese: アニメ)
As for its features, Anime.js…
Anime.js supports the following browsers:
- 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).
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%