Best React animation libraries

Best React animation libraries
BY : Nazar Martincenco
Introduction
In today’s world user experience is everything. As a web developer, I want to provide the best user experience available with minimum technical overhead.
In this blog post, I just want to share my favourite animation libraries that you can use in your own React projects.
react-spring
react-spring is a spring-physics based animation library that should cover most of your UI related animation needs. It gives you tools flexible enough to confidently cast your ideas into moving interfaces.
One of my favourite thing of react-sprint is that you can use hooks in order to create your animation.
This is a simple code to just show how easy it is to start working with this library:
import { useSpring, animated } from 'react-spring'
function App() {
const props = useSpring({ to: { opacity: 1 }, from: { opacity: 0 } })
return <animated.div style={props}>I will fade in</animated.div>
}
GitHub Stars | 21.6K |
Weekly downloads | 649,698 |
Unpacked Size | 2.9 kB |
react-motion
Another very popular animation library. You can easily create draggable lists, photo galleries animations, draggabel elements and so much more.
Also, very easy to use:
import {Motion, spring} from 'react-motion';
// In your render...
<Motion defaultStyle={{x: 0}} style={{x: spring(10)}}>
{value => <div>{value.x}</div>}
</Motion>
GitHub Stars | 20.3K |
Weekly downloads | 665,537 |
Unpacked Size |
framer motion
Framer Motion is an open source, production-ready library that’s designed for all creative developers.
With this library you can easily do this:
- Springs
- Keyframes
- Layout animations
- Shared layout animations
- Gestures (drag/tap/hover)
- SVG paths
- Exit animations
- Server-side rendering
- Orchestrate animations across components
- CSS variables
import { motion } from "framer-motion"
export const MyComponent = ({ isVisible }) => (
<motion.div animate={{ opacity: isVisible ? 1 : 0 }} />
)
GitHub Stars | 12.7K |
Weekly downloads | 714,065 |
Unpacked Size | 1.91 MB |

About Nazar Martincenco
Nazar is a development lead in Application & Cloud Practice. In this role, he is leading full-stack software development in .Net Core, NodeJs, React and Azure. His main topics of interest are digital transformation, Cloud and AI. Nazar likes working with the most technically complicated projects in fintech & lawtech domains.
More on Nazar Martincenco.