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.
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.
You can easily install Framer Motion using NPM or Yarn as follows.
// NPM// Yarn |
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>
);
} You can find the demo of this example on Framer Motion demos on Stackblitz.
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.
You can easily install react-spring using NPM or Yarn as follows.
// NPM// Yarn |
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,
}}
/>
);
} You can find the demo of the previous example on react-spring demos on Stackblitz.
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.
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// Yarn |
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>
);
}; 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.
You can easily install React-Motion using NPM or Yarn as follows.
// NPM// Yarn |
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>
);
};
} You can find the demo of this example on React-Motion demos on Stackblitz.
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.
You can easily install React Move using NPM as follows.
npm i react-move |
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; You can find the demo of this example on React Move demos on Stackblitz.
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.
You can easily install react-anime using NPM as follows.
npm i react-anime |
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>
); You can find multiple react-anime examples on react-anime demos on CodePen.
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.
You can easily install React Awesome Reveal using NPM or Yarn as follows.
|
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 ; You can find the demo of this example on React Awesome Reveal demo on Stackblitz.
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 a wide range of 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!