Creating JavaScript Animations with Anime.js

Anime.js is a very lightweight JavaScript animation engine, 14kb minified, and only 6kb gzipped. It supports all modern browsers and can practically animate anything from CSS properties to arbitrary JavaScript values. In this article, we’ll learn the basics of Anime.js and explore how to create the following animation:

This is the animation that we will be creating by the end of the article.

Anime Basics

Anime provides a very simple API for animating elements. You start by creating an Anime object, and passing it a plain JavaScript object describing your animation:

const animeObject = anime({
  /* describe animation */
});

The following is the anatomy of an animation object:

{
  /* Animation Targets: div, .box, #sky, etc... */
/* Animatable Properties: height, opacity, color, translateX, etc ... */
/* Property Parameters: duration, delay, easing, etc... */
/* Animation Properties: loop, direction, autoplay, etc... */
}

• Animation Targets: div, .box, #sky, …
• Animatable Properties: height, opacity, scale, …
• Property Parameters: duration, delay, easing, …
• Animation Properties: loop, direction, autoplay