How to Use Anime JS in React

I don't know about you, but I just love animations on modern websites. And I always wonder, how to implement such beautiful animations.

I used to think it takes hours, or even days to animate a website in a modern and clean way. But I was far away from the truth.

The truth is, you can add eye-catching animations and transitions to your site in almost no time.

If you don't believe it, just see for yourself.

All you need to do is use some sort of animation library. There are multiple animation libraries available. But today, we'll look at Anime JS. And how to use it with React.

What Is Anime Js

Anime JS is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects. (source: Anime JS)

Can We Use Anime Js in React?

Yes, it's possible to use Anime JS in React! You can use Anime JS in React by installing the official library. Or you can use one of the React Anime libraries that are built on top of Anime JS.

Anime JS is a lightweight library and supports multiple use cases. This makes it a strong consideration when choosing an animation library for your React project.

The problem with the official Anime JS library is the way it works. The library is not using a declarative way of writing code, which makes the integration with React a bit tricky.

However, it's still possible to use this library with React. And in the next section, I'm gonna show you how.

Using Anime Js in React

In this section, we'll learn how to use Anime JS with React. We'll do it by implementing a simple audio player. Like the one in the example below.

In order to use Anime JS in React, we need to install the library by running npm install animejs. When this step is finished we can import the library in any React component with the Anime JS import statement.

import anime from "animejs/lib/anime.es.js"

Let's start by installing the Anime JS library. In your project directory, run the following command.

npm install --save animejs
# If you use Yarn
yarn add animejs

When this step is done, we can start writing <Player /> component. The first step is to render it without any animation whatsoever.

Player.jsx

import { useState, useRef, useEffect } from "react";

const ticks = Array.from(Array(8));

const Player = () => {
  const [playing, setPlaying] = useState(false);

  const handleClick = () => {
    setPlaying(!playing);
  };

  return (
    <div className="player">
      <ul className="dots">
        {ticks.map((_, i) => (
          <li key={i} />
        ))}
      </ul>
      <button onClick={handleClick}>{playing ? "Pause" : "Play"}</button>
    </div>
  );
};

export default Player;

Now, we have the basic structure of the player component. On top of that, we're keeping track of the playing state.

To start animating the ticks of the player, we'll import the Anime JS library.

Adding animations to Player.jsx

const animation = useRef(null);

// This is default configuration for all the ticks
animation.current = anime.timeline({
  direction: "alternate",
  loop: true,
  autoplay: false,
  easing: "easeInOutSine"
});

// This will randomize each tick of a player
// Each tick will have its own animation
for (const tick in ticks) {
  animation.current.add(
    {
      targets: `.dots li:nth-child(${Number(tick) + 1})`,
      scaleY: 1.5 + Math.random() * 4,
      duration: 300 + Math.random() * 300
    },
    Math.random() * 600
  );
}

And this is how the final Player component will look like.

Player.jsx

import anime from "animejs/lib/anime.es.js";
import { useState, useRef, useEffect } from "react";

const ticks = Array.from(Array(8));

const Player = () => {
  const [playing, setPlaying] = useState(false);
  const animation = useRef(null);

  const handleClick = () => {
    playing ? animation.current.pause() : animation.current.play();
    setPlaying(!playing);
  };

  useEffect(() => {
    animation.current = anime.timeline({
      direction: "alternate",
      loop: true,
      autoplay: false,
      easing: "easeInOutSine"
    });

    for (const tick in ticks) {
      animation.current.add(
        {
          targets: `.dots li:nth-child(${Number(tick) + 1})`,
          scaleY: 1.5 + Math.random() * 4,
          duration: 300 + Math.random() * 300
        },
        Math.random() * 600
      );
    }
  }, []);

  return (
    <div className="player">
      <ul className="dots">
        {ticks.map((_, i) => (
          <li key={i} />
        ))}
      </ul>
      <button onClick={handleClick}>{playing ? "Pause" : "Play"}</button>
    </div>
  );
};

export default Player;

The last thing we need to do is add styling.

Player.css

.player {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.dots {
  display: flex;
  align-items: center;
  list-style: none;
  height: 100px;
  padding: 0;
  margin: 0;
}

.dots li {
  border-radius: 2px;
  margin: 0 2px;
  width: 16px;
  height: 16px;
  background-color: #26de81;
}

button {
  background-color: #20bf6b;
  border-radius: 2px;
  color: white;
  font-size: 16px;
  border: none;
  padding: 4px 16px;
  font-weight: bold;
  cursor: pointer;
  width: 100px;
  margin-top: 24px;
}

As you can see, by using the Anime JS library, we can achieve good-looking animations in almost no time.

We can go further and try to make the player look even better. But for the quick demonstration, I think we achieved enough.

Popular React Animation Libraries

In the previous section, we implemented a simple player by using Anime JS with React. I don't know how about you, but I certainly enjoyed working with the library.

However, I think there are better alternatives when it comes to animations in React.

When choosing an animation library for your React project, you should consider one of 2 options:

• React Spring
• Framer Motion

React Spring

The first library I'd suggest is react spring. At first, it may be difficult to understand the concepts of springs. But once you do, you can start creating nice-looking animations - React way!

React Spring is a animation library based on spring-physics. It should cover most of your UI-related animation needs. It gives you tools flexible enough to confidently cast your ideas into moving interfaces. (source: React Spring)

Framer Motion

Framer Motion is also a solid choice. They have a lot of examples of common animation use cases. And the library is packed with reusable components for animating React apps.

Framer Motion is an open-source, production-ready library that's designed for all creative developers. (source: Framer)

Concluding Thoughts

Animation is an important component of modern websites. It makes the user experience more interactive. It helps to convey information in a more engaging way. And helps the user to understand the content better.

Animation also has other benefits, such as navigating the user's eye to an important piece of information using motion. It's safe to say that animation plays a vital role in UX design.

In this article, you learned the basics of the Anime JS library and its applications. You also learned how to use Anime JS with React.

In the last section of this article, I also shared some of my favorite animation libraries for React.

With all this new knowledge you just gained, it's time to start animating your React applications.