Top 7 React Animation Libraries in 2022

1

Framer Motion

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.

#Developer Tools #Animation #React 6 social mentions

2

React Spring

export default function App() { return ( <div className="my-container"> <motion.div whileHover={{ scale: 1.2 }} whileTap={{ scale: 0.8 }} /> </div> ); } Explore Now2. react-springSource: react-springFeatures of react-springInstallation// NPM npm install react-spring // Yarn yarn add react-springUsageimport React from 'react'; import './style.css'; import { useSpring, animated } from '@react-spring/web';

#Developer Tools #Animation #React

3

Remotion.dev

return ( <animated.div style={{ width: 100, height: 100, backgroundColor: 'red', borderRadius: 50, ...styles, }} /> ); }3. RemotionSource: RemotionFeatures of RemotionUsage// NPM npm init video // Yarn yarn create videoimport { useCurrentFrame } from "remotion";

#Developer Tools #Animation #React 4 social mentions

4

React Motion

#Developer Tools #Animation #React

5

React Move

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> ); }; }5. React MoveSource: React MoveFeatures of React MoveInstallationnpm i react-moveUsageimport React, { PureComponent } from 'react' import { Animate } from 'react-move' import { easeExpOut } from 'd3-ease'

#Developer Tools #Animation #React 1 social mentions

6

react-anime

export default Toggle; Try Now6. react-animeFeatures of react-animeInstallationnpm i react-animeUsageimport React from 'react'; import Anime, {anime} from 'react-anime';

#Developer Tools #Animation #React

7

React Awesome Reveal

<div className="blue" /> <div className="green" /> <div className="red" /> </Anime> );7. React Awesome RevealSource: React Awesome RevealFeatures of React Awesome RevealInstallation//NPM npm i react-awesome-reveal //Yarn yarn add react-awesome-revealUsageimport React, { Component } from "react"; import { Slide } from "react-awesome-reveal";

#Developer Tools #Animation #React 1 social mentions