Top 7 React Animation Libraries in 2022

Rajeshwari Pandinagarajan - Aug 11 '22 - - Dev Community

Modern web application user interfaces have various elements to make them more attractive to users. These modern requirements have forced developers to look for new methods to implement UIs with animation and transitions.

As a result, specialized libraries and tools have been introduced to handle animation in web apps. In this article, I will discuss the seven best React animation libraries with which I have the experience to help you choose the best one for your project.

1. Framer Motion

Source: Framer Motion
Source: Framer Motion

Framer Motion is a popular React animation toolkit designed to make simple animations. It has two APIs named Framer API and Motion API. Framer API is responsible for providing rapid interactions, while Motion API provides gestures and animations.

Framer Motion has more than 15,000 GitHub stars and 1.2 million weekly NPM downloads.

Features of Framer Motion

  • Support for server-side rendering. It can be used with React-based frameworks like Next.js, which supports server-side rendering.
  • Colors are simple to adjust and manipulate.
  • Good documentation, simple to understand.
  • Support for TypeScript.
  • Helpers for complex, physics-based animation.
  • Users only need to set the correct configurations. The Motion API automatically generates animations.

Installation

You can easily install Framer Motion using NPM or Yarn as follows.

// NPM
npm install framer-motion  
// Yarn
yarn add framer-motion
Enter fullscreen mode Exit fullscreen mode

Usage

After installation, you can import Framer Motion to your React component like in the following. This example shows how to scale up and down a button on hovering.

import React from "react";
import { motion } from "framer-motion";
import "./styles.css";

export default function App() {
  return (
    <div className="my-container">
      <motion.div whileHover={{ scale: 1.2 }} whileTap={{ scale: 0.8 }} />
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

You can find the demo of this example on Stackblitz.

2. react-spring

react-spring
Source: react-spring

react-spring is a modern animation library based on the physics of springs. It’s pretty flexible and has some amazing features, including hooks, to help developers.

react-spring has more than 23,700 GitHub stars and 700,00+ weekly NPM downloads.

Features of react-spring

  • There are a total of 5 hooks ( useChain , useSpring , useSprings , useTrail , useTransition ) for different situations.
  • Pre-defined configurations.
  • Users can quickly create animations by providing props to pre-defined components.
  • Cross-platform support, including web and natively developed apps.
  • Support for Jest for testing.

Installation

You can easily install react-spring using NPM or Yarn as follows.

// NPM
npm install react-spring  
// Yarn
yarn add react-spring
Enter fullscreen mode Exit fullscreen mode

Usage

After installation, you can import react-spring to your React component like in the following. This example shows how to create a fade-in animation.

import React from 'react';
import './style.css';
import { useSpring, animated } from '@react-spring/web';

export default function App() {
  const styles = useSpring({
    loop: true,
    from: { opacity: '0' },
    to: { opacity: '1' },
    config: { duration: '2000' },
  });

  return (
    <animated.div
      style={{
        width: 100,
        height: 100,
        backgroundColor: 'red',
        borderRadius: 50,
        ...styles,
      }}
    />
  );
}
Enter fullscreen mode Exit fullscreen mode

You can find the demo of the previous example on Stackblitz.

3. Remotion

Source: Remotion
Source: Remotion

Remotion allows developers to create videos and animation using familiar languages like CSS, HTML, JavaScript, and TypeScript. So, developers do not need any knowledge about video creation. Instead, they can use their programming knowledge to create animation and videos using Remotion.

Remotion has more than 13,000 GitHub stars and 5,000+ weekly NPM downloads.

Features of Remotion

  • Support for React features like reusable components, powerful compositions, and quick reload.
  • No prior experience with video editing is required.
  • You can use the Remotion player to play and evaluate your videos in your browser.
  • You can use coding features like variables, algorithms, functions, and API to add new effects.
  • Support for server-side rendering.

Usage

Remotion has two dependencies. You need to install FFmpeg and Node.js before using it. After that, you can easily create a new React project with Remotion using NPM or Yarn.

// NPM
npm init video  
// Yarn
yarn create video
Enter fullscreen mode Exit fullscreen mode

After creating the project, you can start the application using npm run start. It will open the Remotion player for you. Then, you can import Remotion to a component and use it as follows.

import { useCurrentFrame } from "remotion";

export const MyVideo = () => {
  const frame = useCurrentFrame();
  return (
    <div style={{flex: 1,
        textAlign: "left",
        fontSize: "10px",
      }}
    >
       Welcome to Remotion.
    </div>
  );
};
Enter fullscreen mode Exit fullscreen mode

4. React-Motion

React-Motion is an animation toolkit that makes building and implementing realistic animations much easier. However, React-Motion can be hard to grasp for beginners. But it has good documentation with rich examples to help developers.

React-Motion has more than 21,000 GitHub stars and 570,000 weekly NPM downloads.

Features of React-Motion

  • 5 components with unique purposes: spring, Motion, StaggeredMotion, TransitionMotion , and presets.
  • Support for TypeScript.
  • No need for hard-coded easing curves and durations.
  • Concepts of physics can be used to provide interrupted animations.
  • Alternative to React TransitionGroup.

Installation

You can easily install React-Motion using NPM or Yarn as follows.

// NPM
npm i react-motion  
// Yarn
yarn add react-motion
Enter fullscreen mode Exit fullscreen mode

Usage

After installation, you can import React-Motion to your React component like in the following. This example shows how to create a toggle animation on a button click.

import React from 'react';
import {Motion, spring} from 'react-motion'; 

export default class Toggle extends React.Component { 

  constructor(props) { 
    super(props); 
    this.state = {open: false}; 
  };

  mouseDown = () => { 
    this.setState({open: !this.state.open}); 
  };

  touchStart = (e) => { 
    e.preventDefault(); 
    this.handleMouseDown(); 
  };

  render() { 
    return ( 
      <div> 
        <button 
          onMouseDown={this.mouseDown} 
          onTouchStart={this.touchStart}> 
            Toggle 
        </button>
        <Motion 
          style={{x: spring(this.state.open ? 400 : 0)}}> 
          {({x}) => 
            <div> 
              <div
                style={{ 
                  WebkitTransform: `translate3d(${x}px, 0, 0)`,
                  transform: `translate3d(${x}px, 0, 0)`, 
                }} 
              /> 
            </div> 
          } 
        </Motion> 
      </div> 
    ); 
  };
}
Enter fullscreen mode Exit fullscreen mode

You can find the demo of this example on Stackblitz.

5. React Move

Source: React Move
Source: React Move

React Move is a React library that allows you to make attractive, data-driven animations. It is a lightweight library that has lifecycle events on transitions.

React Move has more than 6,500 GitHub stars and 90,00 weekly NPM downloads.

Features of React Move

  • React, React-Native, and React-VR are all supported.
  • TypeScript is supported.
  • Lifecycle events for animations: start, interrupt, and end.
  • Custom tweeting ability.

Installation

You can easily install React Move using NPM as follows.

npm i react-move
Enter fullscreen mode Exit fullscreen mode

Usage

After installation, you can use React Move in your React app like in the following. This example shows how to create a toggle animation on a button click.

import React, { PureComponent } from 'react'
import { Animate } from 'react-move'
import { easeExpOut } from 'd3-ease'

const outerDiv = {
  borderRadius: 3,
  backgroundColor: 'rgba(128,128,128)',
  position: 'relative',
  margin: '5px 3px 10px',
  width: 200,
  height: 40,
}

class Toggle extends PureComponent {

  state = {
    open: false
}

  handleClick = () => {
    this.setState({ open: !this.state.open })
  }

  render() {
    return (
      <div>
        <button 
          onClick={this.handleClick}
        >
          Toggle
        </button>

        <Animate
          start={() => ({
            x: 0,
          })}

          update={() => ({
            x: [this.state.open ? 200 : 0],
            timing: { duration: 750, ease: easeExpOut }
          })}
        >
          {(state) => {
            const { x } = state

             return (
               <div style={outerDiv}>
                 <div 
                   style={{
                     position: 'absolute',
                     width: 50,
                     height: 50,
                     borderRadius: 4,
                     opacity: 0.7,
                     backgroundColor: '#ff69b4',
                     WebkitTransform: `translate3d(${x}px, 0, 0)`,
                     transform: `translate3d(${x}px, 0, 0)`
                   }}
                 />
               </div>
             )
           }}
         </Animate>
       </div>
     )
   }

 }

export default Toggle;
Enter fullscreen mode Exit fullscreen mode

You can find the demo of this example on Stackblitz.

6. react-anime

react-anime is a simple animation library inspired by anime.js. It wraps anime.js using a React component and allows developers to easily pass props to create animations.

react-anime has more than 4,000 weekly NPM downloads.

Features of react-anime

  • Easy to use. You can animate anything by wrapping it with the component.
  • Ability to animate CSS, SVG, and DOM attributes just using props.
  • Support for TypeScript.

Installation

You can easily install react-anime using NPM as follows.

npm i react-anime
Enter fullscreen mode Exit fullscreen mode

Usage

After installation, you can use react-anime in your React application.

import React from 'react';
import Anime, {anime} from 'react-anime';

const App = (props) => (
     <Anime
      easing="easeOutElastic"
      loop={true}
      duration={1000}
      direction="alternate"
      delay={(el, index) => index * 240}
      translateX="13rem"
      scale={[0.75, 0.9]}
     >

      <div className="blue" />
      <div className="green" />
      <div className="red" />
    </Anime>
);
Enter fullscreen mode Exit fullscreen mode

You can find multiple react-anime examples on CodePen.

7. React Awesome Reveal

Source: React Awesome Reveal
Source: React Awesome Reveal

React Awesome Reveal is a TypeScript package that provides reveal animations using the Intersection Observer API to detect when elements appear in the viewport. Its animations are provided by Emotion and implemented as CSS animations to benefit from hardware acceleration.

React Awesome Reveal has more than 10,000 weekly NPM downloads.

Features of React Awesome Reveal

  • Support for server-side rendering and TypeScript.
  • No dependencies are required.
  • Allows defining custom animations.
  • Support for tree shaking.
  • Fast and lightweight.
  • All major browsers now support the Intersection Observer API and CSS animations.

Installation

You can easily install React Awesome Reveal using NPM or Yarn as follows.

//NPM
npm i react-awesome-reveal
//Yarn
yarn add react-awesome-reveal
Enter fullscreen mode Exit fullscreen mode

Usage

After installation, you can use React Awesome Reveal in your React application.

import React, { Component } from "react";
import { Slide } from "react-awesome-reveal";

class App extends Component {
  render() {
    return (
      <Slide triggerOnce>
        <ul >
          <li> Item 1 </li>
          <li> Item 2 </li>
          <li> Item 3 </li>
          <li> Item 4 </li>
        </ul>
      </Slide>
    );
  }
}

export default App ;
Enter fullscreen mode Exit fullscreen mode

You can find the demo of this example on Stackblitz.

Conclusion

In this article, I discussed seven great React animation libraries with unique features. I hope my descriptions helped you choose the best React animation library for your project. Thank you for reading.

The Syncfusion Essential Studio for React suite offers over 70 high-performance, lightweight, modular, and responsive UI components in a single package. It’s the only suite you’ll ever need to construct a complete app.

If you have questions, you can contact us through our support forum, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Image
3 Reasons 3 Reasons Why Your Asbestos Payout Is Broken (And How To Repair It)
Image
The Health Benefits of Strawberry Kiwi Pear Raz: Why It’s More Than Just a Tasty Treat
Image
How to Build Decentralized Apps on the XDC Blockchain?
Image
Easy-to-Follow Guide For McAfee Antivirus Installation
Image
Django API Project Setup

python, django, authentication
Image
Latio Team: A community for tech hackers building together

devchallenge, wixstudiochallenge, webdev, javascript
Image
Advanced Error Handling in Spring Boot Microservices

java, springboot, microservices, programming
Image
Demystifying Kubernetes: A Beginner's Guide to Containers and Orchestration

beginners, kubernetes, productivity, devops
Image
Zonnepanelen advies: ontvang gratis offerte
Image
Getting Started with FPGA Programming Using Python: A Beginner's Guide
Image
Best Digital Marketing Institutes in Lucknow

digitalmarketing, data, datascience, dataengineering
Image
You'll Never Guess This Lost Key Car's Benefits
Image
RFB Dissected: The Art of Pixel Delivery Across Networks
Image
Accessible Equipment Rentals & Caregiving Services in Mumbai
Image
Download ebook Solidity gratis

solidity, web3, books, blockchain
Image
10 Dripping Coffee Machine Tips All Experts Recommend
Image
What Is Asbestos Compensation Lawyer? How To Make Use Of It
Image
Comparing Jupyter Notebook and Data.olllo: Which is Best for Your Data Science Needs?
Image
Guess what will be the output?

c
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .