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
Concurrency & Fault-tolerant In Distributed Systems

webdev, concurrency, architecture
Image
The Worst Advice We've Heard About Baltimore Accident Lawyers
Image
Automating AWS DNS Firewall Domain List Updates Using S3, Lambda, and CLI

community, dns, aws, route53
Image
What Is The Reason Adding A Key Word To Your Life Can Make All The A Difference
Image
Laravel AI service with support for multiple LLMs

webdev, laravel, ai, tutorial
Image
Observability - 1

monitoring, observability, devops, learning
Image
Jak Wyciszyć Ściany i Stworzyć Spokojne Miejsce w Twoim Domu
Image
Microsoft Copilot Security

githubcopilot, aisecurity, microsoftcloud, microsoftazure
Image
Macam Keuntungan Judi Online24jam Deposit Pulsa
Image
Unlock Ultimate Security: How to Use YubiKey (or Any Security Key) for Passwordless Access in Azure Virtual Machines!

azure, virtualmachine, security
Image
Keutamaan Management Waktu Dalam Taruhan Judi Online
Image
LINUX CHALLENGE DAY 2

devops, linux, ubuntu
Image
Why All The Fuss Over Accident Lawyer Savannah?
Image
What's The Current Job Market For Couch Professionals Like?
Image
A Look In The Secrets Of Salt Lake City Accident Lawyers
Image
situs slots online terpercaya dan terbaik di indonesia
Image
Python Virtual Environments
Image
Medical Billing Companies: How They Help Improve Cash Flow for Your Practice
Image
Using and Editing the Windows hosts File

microsoft, hosts, learning, tutorial
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .