What is Anime.js?

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.

It lets you target various objects on the page in order to animate them on paths or by transforming them into other shapes.

How do I set it up?

To install using npm, paste this command into the terminal.

npm install animejs --save

To include on a javascript server.

const anime = require('animejs');

To include in an html page, paste this into the header element.

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

How do I use it?

Firstly, ensure that the anime functions are executed after the window loads. It will return undefined otherwise and the animations won't do anything. Next, this sample uses some Bootstrap icons so make sure that's installed.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css">

I made a simple animation of dancing squares with a play and a pause button to stop and resume the animation.

To start, we need some divs that will be our squares and another div to contain them. Create a div with the id of boxes and inside of that create as many divs as you like to represent the boxes to be animated. I've done 5 for my animation.

<div id="boxes">
    <div class="box purple"></div>
    <div class="box blue"></div>
    <div class="box red"></div>
    <div class="box yellow"></div>
    <div class="box green"></div>
</div>

Now you'll need some CSS. Either in the same page or as a seperate CSS document, create CSS tags for the squares to color and size them.

Size and properties:

#boxes{
    width:80%;
    margin:auto;
    text-align: center;
}

.box{
    position: relative;
    width:100px;
    height: 100px;
    margin:4px;
    display:inline-block;
}

Color:

.red{background-color: red;}
.blue{background-color: blue;}
.yellow{background-color: yellow;}
.purple{background-color: blueviolet;}
.green{background-color: lime;}

You should now see the squares lined up on the page but they're decidedly not dancing so let's go about fixing that.

Back in the main page, make a script element and make it listen for the window to finish loading. Inside the event funciton, paste this variable function.

const playPause = anime({
        //we want to affect any div with the class of box.  this will catch all the divs we made earlier.
        targets: 'div.box',
        //the boxes will move along the Y axis
        translateY: [
            //This makes the box move down. value is the distance down it goes. duration is how long it stays there
            {value: 100, duration: 1000},
            //this makes it go back up.  value is where its moving to, duration is how long it takes to get there
            {value: 0, duration: 800}
        ],
        //the box will spin
        rotate: {
            value: '1turn',
            easing: 'easeInOutSine',
        },
        //boxes will have a delay depending on where they are in the list.  the first box goes first, etc.
        delay: function(el, i, l){return i * 1000},
        //the animation won't play automatically when the page is loaded
        autoplay: false,
        //the animation will loop indefinitely
        loop: true
    })

document.querySelector('#boxes .play').onclick = playPause.play;
document.querySelector('#boxes .pause').onclick = playPause.pause;

This controls the boxes' movement as well as the buttons we'll be adding here now.

Back down in the html, we need some buttons to control the start and stop. Put them inside the boxes div just above the squares.

<div id="btns">
    <button class="play"><i class="bi bi-play-circle"></i></button>
    <button class="pause"><i class="bi bi-pause-circle"></i></button>
</div>

And to style our new buttons:

#btns{
    padding:20px;
    background:#fff;
    margin-bottom:20px;
}

#btns button{
    background:#fff;
    padding:5px 10px;
    border:0;
}

#btns .bi{
    font-size:30px;
}

#btns .bi-play-circle{
    color:green;
}

#btns .bi-pause-circle{
    color:red;
}

You should be able to start and stop the animation at will.