Skip to Content

Best React animation libraries

Nazar Martincenco
November 29, 2021


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 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 Stars21.6K
Weekly downloads649,698
Unpacked Size2.9 kB


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>}
GitHub Stars20.3K
Weekly downloads665,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 Stars12.7K
Weekly downloads714,065
Unpacked Size1.91 MB

About the author

Software Development Lead | UK
Nazar is a software development lead in Application & Cloud Practice. In this role, he is leading full-stack software development in .Net Core, C#, NodeJs, React and Azure. His main topics of interest are digital transformation, fintech, AI and Cloud.


    Leave a Reply

    Your email address will not be published. Required fields are marked *

    Slide to submit