Build a Bouncing Basketball App with Anime.js
By: Chad Murobayashi
Tags: JavaScript, Animation, Web Development, Programming, Design

Setting up our JavaScript file

Now that we understand how to create a bounce effect with Anime.js, let’s work on our script.js file. We will first create a reference to the container div we created in our index.html file and store this in a variable called container. We will also create a variable called ballCount which will help us keep track of the number of balls and assign each ball a different id.

const container = document.querySelector('.container');

let ballCount = 1;

In our app, we will create a new bouncing basketball every time we click in the window. First, add a click event listener to the window. This click event will then run the following steps.

window.addEventListener('click', e => { })

1. Create the Ball

We first use document.createElement to create a div and an image. For the image element, we will set the attribute of src to be the route to the basketball image, and set an alt to be called basketball.

For the div, we will set the class to ball, and give it an id of ball plus the ballCount number we declared earlier. This is to keep track of this ball element and animate it later.

Finally, we will append the image as a child element to the ball div.

const ball = document.createElement('div');

const image = document.createElement('img'); image.setAttribute('src', './basketball.png');

image.setAttribute('alt', 'basketball'); ball.classList.add('ball');

ball.id = 'ball' + ballCount; ball.appendChild(image);

2. Set the Position of the Ball

We will then set the starting position of the ball to be where we clicked on the screen. Using e.view.innerHeight, we can get the height of the screen. Remember, our ball div will be in absolute positioning, so we will set the bottom and left properties on the ball div. The bottom property will be set to the screen height minus the value of e.y minus 50. We subtract an additional 50 because the height of our ball image is 100, so we want to get the center of it. Then, we set the left property of the ball with e.x minus 50.

const screenHeight = e.view.innerHeight;

const bottom = screenHeight - e.y - 50; ball.style.bottom = `${bottom}px`;

ball.style.left = `${e.x - 50}px`;

3. Append the Ball to the Container

Now that we have the ball created and set in place, we will append it as a child to the container div.

container.appendChild(ball);

4. Add the Anime.js Functions

Next, we will add the bounceUp and bounceDown functions which we explained earlier. As you can see, the target for the animation will be the id of the ball we created. For the translateY values, we are using the bottom of the screen as one point, and the point we clicked as another point.

const bounceUp = anime({

autoplay: false,

targets: '#ball' + ballCount,

translateY: [bottom, 0],

duration: 575,

easing: 'easeOutQuad',

complete: () => {

bounceDown.restart();

}

}): const bounceDown = anime({

autoplay: false,

targets: '#ball' + ballCount,

translateY: [0, bottom],

duration: 575,

easing: 'easeInQuad',

complete: () => {

bounceUp.restart();

}

}); bounceDown.play();

At the end of the code snippet above, we are starting the bounce animation by calling play on bounceDown. This is then run on a loop because once one function is completed, it calls the other function.

5. Increment the Ball Count

Finally, we will increment the ballCount variable, so we can create a new ball id on the next click.

ballCount++;

The final script.js file should look like below.