Best React animation libraries

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>
}

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>

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 }} />
)