Getting started with Anime.js

09/22/2021

Contents

In this article, you will learn how to get started with Anime.js.

What is Anime.js?

From the anime.js website itself:

Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

Anime.js

You can easily create rich animations with Anime.js.
It is free to use whether it’s for personal or commercial use.
The library supports modern browsers, including IE/Edge 11+.

Examples

In addition to the examples below, you can find amazing examples from the official website.

https://animejs.com/

logo animation

See the Pen anime.js V3 logo animation by Julian Garnier (@juliangarnier) on CodePen.

SVG sphere animation

See the Pen SVG sphere animation with anime.js by Julian Garnier (@juliangarnier) on CodePen.

Easings animation

See the Pen Easings animations with anime.js by Julian Garnier (@juliangarnier) on CodePen.

Setting up Anime.js

To get started using Anime.js, download the library from the official website.

https://animejs.com/

Include the downloaded file in your HTML document:

<script src="path/anime.min.js"></script>

If you use npm, run the following command:

$ npm install animejs --save

import

import anime from 'anime.min.js';

require

const anime = require('animejs');

You can also use the latest release of the library hosted on a CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

Getting started with Anime.js

Use the anime() function to create the animations (See demo below).

Demo

Code

HTML

<div class="el"></div>

CSS

.el {
  width: 50px;
  height: 50px;
  background-color: #333;
}

JavaScript

anime({
  targets: '.el',
  translateX: 150,
  rotate: '1turn',
  duration: 3000,
  direction: 'alternate',
  loop: true,
  easing: 'easeInOutSine',
});