Animation is Super Easy with These React Libraries!!!

Make Your React app incredible using animations with these Libraries.

In this day and age, simply having a great layout and great-looking UI is considered pretty common and nearly all frontend developers can achieve those things.

Although, what is not common are animations. I love the websites and mobile apps that use animations in their UI, it just makes the website come to life. It feels visually appealing and satisfying when you do something and the website respond with an animation.

Here is a small list of the React animation libraries that you can use and make your UI awesome🤩.

List of Top React animation Libraries:-

Framer Motion
React Transition Group
React Spring Library
React Motion Library

Let's get started😊.

Framer Motion:-

It is one of the most popular and most used animation libraries in React that enables you to make complex animations with ease. To install it copy and paste the command below into your React project terminal:

npm install framer-motion

In the same way, do this if using yarn:

yarn add framer-motion.

For making a simple rotating div animation in framer motion, copy and paste this code. The below code is like a boilerplate for framer motion and any animation would work similarly.

import { motion } from 'framer-motion';
export default function App() {
  const [isActive, setIsActive] = React.useState(false);
  return (
    <motion.div
      className="block"
      onClick={() => setIsActive(!isActive)}
      animate={{
        rotate: isActive ? 180 : 360
      }}
    >
      Hello Framer motion
    </motion.div>
  );
}

Here the motion component is imported from the framer motion package. The motion. div is the element that will be animated. When the condition is true, the animation would run and when it becomes false, it automatically stops where it is, securing the state of the animation.

React-Transition-Group:-

This library is also used a lot among React developers. The real advantage it has over framer-motion or any other library is the fact that it is very lightweight. It does not have predefined animations and it enables to make many great animations just using CSS. Here is how you can install it.

For installation with npm use this command:-

npm install react-transition-group

And for installation with yarn:-

yarn add react-transition-group

Here is how you can make a simple animation with react-transition-group.

import React from "react";
import ReactDOM from "react-dom";
import { Transition } from "react-transition-group";
import "./styles.css";
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      in: false
    };
  }
  componentDidMount() {}
  onClick = () => {
    this.setState(state => ({ in: !state.in }));
  };
  render() {
    return (
      <div className="App">
        <button onClick={this.onClick}>BUTTON</button>
        <Transition in={this.state.in} timeout={5000} mountOnEnter appear>
          {state => <div className={`item item--${state}`} />}
        </Transition>
      </div>
    );
  }
}

export default app;

Just we had the motion component in Framer Motion, we have the Transition component in React-transition-group. This block of code makes a div appear on the screen when the button is clicked.

React Spring Library:-

It is an animation library that uses real-life spring physics to animate the elements. It is best for game development or other activities where we have to simulate the real-life motion of an object.

This is how to add it using npm:

npm install react-spring

Here is how it is done in yarn

yarn add react-spring

To make a basic spring animation, use this block of code below:-

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { useSpring, animated } from 'react-spring';
import './styles.css';


function SpringDemo() {
  const [state, toggle] = useState(true)
  const { x } = useSpring({ from: { x: 0 }, x: state ? 1 : 0, config: { duration: 1000 } })
  return (
    <div onClick={() => toggle(!state)}>
      <animated.div
        style={{
          opacity: x.interpolate({ range: [0, 1], output: [0.3, 1] }),
          transform: x
            .interpolate({
              range: [0, 0.25, 0.35, 0.45, 0.55, 0.65, 0.75, 1],
              output: [1, 0.97, 0.9, 1.1, 0.9, 1.1, 1.03, 1]
            })
            .interpolate(x => `scale(${x})`)
        }}>
        Hello React Spring
      </animated.div>
    </div>
  )
}

export default SpringDemo

It is a basic spring animation in which the text would grow and shrink for the duration of the animation. The example above uses two components from react-spring. The first one animated is the element that will be animated, and the second one is to manage the state of the component during the animation.

Interpolation is a function that allows you to take multiple values and form one result. Interpolation in react-spring can also be used for a series of states such as CSS keyframes and colors. Most animations are done by wrapping our animations in an animated div component.

React-Motion:-

It is also the library that uses physics for making animations but unlike the React-Spring library, it can make any kind of physics-based animation, not just spring animation.

Using these commands you can add React-Motion to your React project.

For npm:

npm install react-motion

And for yarn:

yarn add react-motion

Copy this block of code below to make a simple animation with this library.

import React from 'react'
import { StaggeredMotion, spring } from 'react-motion'
const AnimatedGridContents = props => {
  return (
    <StaggeredMotion
      defaultStyles={props.items.map(() => ({ opacity: 1, translateY: -30 }))}
      styles={prevInterpolatedStyles =>
        prevInterpolatedStyles.map((_, i) => {
          return i === 0
            ? { opacity: spring(1), translateY: spring(0) }
            : {
              opacity: prevInterpolatedStyles[i - 1].opacity,
              translateY: spring(prevInterpolatedStyles[i - 1].translateY)
            }
        })
      }
    >
      {interpolatingStyles => (
        <div className="grid">
          {interpolatingStyles.map((style, i) => (
            <div
              className="card"
              key={props.items[i]}
              style={{
                opacity: style.opacity,
                transform: `translateY(${style.translateY}px)`
              }}
            >
              {props.items[i]}
            </div>
          ))}
        </div>
      )}
    </StaggeredMotion>
  )
}

This animation library is an absolute must if you are trying to build physics-based games or animation based on physics.

Conclusion:

React has come a long way from just being another library of javascript to becoming the backbone of today’s internet. All this happened simply because it had the support of the community. There are many libraries like the ones I mention above in the market and they are the reason React is so good. They make it what it currently is, and it is just getting better each day.

Here are all the links to the original documentation of all these libraries. I would recommend checking out more about these libraries and choosing wisely for your next project😉.

Framer Motion

React-transition-group

React-spring

React-motion

Follow me on twitter and Medium to get articles like this as soon as I post. I am telling you its worth the time😎.