Getting started with Anime.js

Web Design & Web Development

In this article, I will introduce 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+.

Sponsored links

Examples

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

anime.js
Javascript animation engine

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.

Sponsored links

Setting up Anime.js

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

anime.js
Javascript animation engine

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>
Sponsored links

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',
});