Skip to content

Rainbow
Apps

Rainbow
Apps

Let's do some animations in native Javascript

Have you ever wanted to do some animations in your application but didn't know how to do it?

In this article we are going to see how to throw particles at click, like in the gif below:

Firework animation at click

Element.animate API

To animate a DOM element, we have to call the function animate. The function signature is:

domElement.animate(keyframes, options);

The keyframes are the parts of the animation. If you pass an array with a single Element, the initial position will be the actual position of the element. Otherwise it will be the first value in the keyframes array.

If the initial position of the animation is different from the position in the DOM, there will be a glitch at the beginning or at the end of the animation.

Animation glitch

The options can be an integer that represents the duration of the animation or an object with multiple properties:

  • duration: the duration of the animation
  • iterations: the number of iteration of the animation (Infinity for an endless animation)
  • delay: to put some delay to the animation
  • ...

Infinity square

In this part, we are going to make a circle move on a square:

  • point 1: the initial point
  • point 2: translation by the axe y from the point 1
  • point 3: translation by the axes x and y from the point 1
  • point 4: translation by the axe x from the point 1

We finally get the code:

// Let's get our circle element
const circle = document.getElementById("circle");

// Knowing the square 150px sides
circle.animate(
  [
    {}, // The initial position is the current one
    {
      transform: "translateY(150px)"
    },
    {
      transform: "translate(150px, 150px)"
    },
    {
      transform: "translateX(150px)"
    },
    {} // The final position is the current one
  ],
  { duration: 4000, iterations: Infinity }
);

We finally get the following animation:

Circle makes square animation


Let's code the click firework

Add element dynamically

For this example we will have to add element dynamically. Let's create a div on click:

document.addEventListener('click', () => {
  const element = document.createElement('div');

  document.body.appendChild(element);
});

Now we want to put some style on this element, we are going to add some inline styles with element.style.myStyleProperty:

// A list of all possible colors
const COLORS = [
  "red",
  "blue",
  "green",
  "yellow",
  "pink",
  "purple",
];

document.addEventListener("click", (e) => {
  // Get the position of the cursor in the document
  const { clientX: x, clientY: y } = e;

  const element = document.createElement("div");
  element.style.width = "30px";
  element.style.height = "30px";
  element.style.border = "1px solid black";
  // The elements are in absolute position
  element.style.position = "absolute";
  element.style.top = `${y}px`;
  element.style.left = `${x}px`;
  // We want our cursor to be centered in the square
  element.style.transform = "translate(-50%, -50%)";
  // Get a color randomly
  element.style.backgroundColor =
    COLORS[Math.floor(Math.random() * COLORS.length)];

  document.body.appendChild(element);
});

Animation

Aright, currently we have a square that spawns under the mouse on click.

Let's add some random diagonal animation to this square.

element.animate(
  [
    {
      // Math.random() - 0.5 returns integer between -0.5 and 0.5
      transform: `translate(${(Math.random() - 0.5) * 500}px, ${
        (Math.random() - 0.5) * 500
      }px) rotate(${Math.random() * 520}deg)`,
      // We want to reduce the opacity until 0
      opacity: 0,
    },
  ],
  1500
);

Nice, it's working, but actually it's not perfect, because the square stays visible at the end of the animation:

Problem of display at the end of animation

Actually, we could just change the initialization of the div and the animation to add the border and background-color during the animation.

element.animate(
  [
    {
      backgroundColor:
        COLORS[Math.floor(Math.random() * COLORS.length)],
      border: "1px solid black",
    },
    {
      // Math.random() - 0.5 returns integer between -0.5 and 0.5
      transform: `translate(${(Math.random() - 0.5) * 500}px, ${
        (Math.random() - 0.5) * 500
      }px) rotate(${Math.random() * 520}deg)`,
      // We want to reduce the opacity until 0
      opacity: 0,
    },
  ],
  1500
);

Well, there is no more, display's problem, but if you look at the DOM the div stays. It can be a problem when we are going to do the fireworks with a lot of div, at each click, DOM elements number will increase.

Luckily, domElement.animate returns an animation, on which we can get a Promise which is resolved when the animation is finished. Let's just remove the dom element when the animation is ended:

animation.finished.then(() => createdElement.remove());

You can also do this with an event handler onfinish put on the animation:

animation.onfinish = () => createdElement.remove();

Firework

Now, let's code the easy part: create multiple particles (with a loop):

// A list of all possible colors
const COLORS = [
  "red",
  "blue",
  "green",
  "yellow",
  "pink",
  "purple",
];
// Defines the particle number
const PARTICLES_NUMBER = 20;

function createParticle(x, y) {
  const element = document.createElement("div");
  element.style.width = "30px";
  element.style.height = "30px";
  element.style.border = "1px solid black";
  // The elements are in absolute position
  element.style.position = "absolute";
  element.style.top = `${y}px`;
  element.style.left = `${x}px`;
  // We want our cursor to be centered in the square
  element.style.transform = "translate(-50%, -50%)";
  // Get a color randomly
  element.style.backgroundColor =
    COLORS[Math.floor(Math.random() * COLORS.length)];

  const animation = element.animate(
    [
      {
        // Math.random() - 0.5 returns integer between -0.5 and 0.5
        transform: `translate(${(Math.random() - 0.5) * 500}px, ${
          (Math.random() - 0.5) * 500
        }px) rotate(${Math.random() * 520}deg)`,
        // We want to reduce the opacity until 0
        opacity: 0,
      },
    ],
    1500
  );

  // Remove the particle at the end of animation
  animation.onfinish = () => element.remove();

  document.body.appendChild(element);
}

document.addEventListener("click", (e) => {
  // Get the position of the cursor in the document
  const { clientX: x, clientY: y } = e;

  // Create multiple particles
  for (let i = 0; i < PARTICLES_NUMBER; i++) {
    createParticle(x, y);
  }
});

Here we go :)


Conclusion

In this little article, we've just seen how to do basic animations in javascript, with a nice firework animation on click, but the power is unlimited.

Now it's your turn to play with animations :D

07-14-2021

Rainbow Apps

Get it on Google Play

© Copyright 2022 Rainbow Apps. All rights reserved.

Rainbow Apps

© Copyright 2022 Rainbow Apps.
All rights reserved.

Get Numbersion app

Get it on Google Play

Follow me