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
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
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>
);
}
You can find the demo of this example on Stackblitz.
2. 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
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,
}}
/>
);
}
You can find the demo of the previous example on Stackblitz.
3. 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
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>
);
};
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
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>
);
};
}
You can find the demo of this example on Stackblitz.
5. 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
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;
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
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>
);
You can find multiple react-anime examples on CodePen.
7. 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
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 ;
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!
Top comments (0)