Best Animation Libraries for ReactJS
Tags: react, css, javascript, beginners
Published: 2022-01-22 15:31:18

# Introduction

ReactJS is the most popular and loved framework among web developers for developing the frontend. From the launch, it has seen only growth. There are tons of libraries on the web for ReactJS that made React more awesome.

Today, we are going to look into some of the best animation libraries that will help you to create animation. These libraries are easy to install, learn and create animation.

So let's get started.

# [Framer Motion](https://www.framer.com/motion/)

> A production-ready motion library for React. Utilize the power behind Framer, the best prototyping tool for teams. Proudly open source.

![Framer Motion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xeef623lsjakkcjm8x5r.png)

## Installation

```bat
npm i framer-motion
```

## Usage

### Imports

```
import { motion } from "framer-motion";
```

### Code

In a `motion.div` tag, you define the animation of the component.
- **animate**:You define the properties of the animation here. These are CSS properties.

- **transition**: You define the transition properties here. Such as repeat, duration, etc.


```javascript
<motion.div
        animate={{ x: 400, borderRadius: 50 }}
        transition={{ repeat: Infinity, duration: 1 }}
        className="circle"
      />
```

## CodeSandbox Example

{% codesandbox framer-motion-f5ynt %}

# [React Spring](https://react-spring.io/)

> react-spring is a spring-physics based animation library that should cover most of your UI related animation needs.

![React Spring](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rr3fjph26i0zzrgsyxd4.jpg)
  
## Installation

```bat
npm i react-spring
```

## Usage

### Imports

```javascript
import { useSpring, animated } from "react-spring";
```

### Code

We have imported two things useSpring and animated.
- **useSpring**: We define all the properties of the animation and transition here. `from` define the initial properties of the element and `to` is the final properties.

- **animate**: It is used to define the element for the transition. It works as a component that takes style as the defined animation in useSpring.

```javascript
  const props = useSpring({
    to: { y: 200, opacity: 0.5 },
    from: { y: 0, opacity: 1 },
  });

  <animated.div style={props} className="circle"></animated.div>

```

## CodeSandbox Example

{% codesandbox react-spring-wp4ni %}


# [React Motion](https://github.com/chenglou/react-motion)

> A spring that solves your animation problems.


![React Motion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ki979me996eqp1bexmr5.png)

## Installation

```bat
npm i react-motion
```

## Usage

### Imports

```javascript
import { Motion, spring } from "react-motion";
```

### Code

- **Motion**: Every animation and property is wrapped inside the `Motion` component. It contains the default style and animation properties using `spring`.


```javascript
<Motion
        defaultStyle={{
          translateX: 0,
          opacity: 0,
        }}
        style={{
          translateX: spring(200),
          opacity: spring(1),
        }}
      >
        {(interpolatedStyles) => (
          <div
            style={{
              transform: `translateY(${interpolatedStyles.translateX}px)`,
              opacity: `${interpolatedStyles.opacity}`
            }}
            className="circle"
          ></div>
        )}
      </Motion>
```

# CodeSandbox Example

*Refersh to play the animation*

{% codesandbox react-motion-7wzwj %}


# Last Note

*These are 3 Animation libraries for ReactJS that I like and use in my project for animation.*

*I hope you will try to use one of the libraries in your next project. Thanks for reading the post.*