Best Libraries for Animation in React

Introduction to Animation in React

React is the most popular and loved framework among web developers for developing the frontend. From the launch, it has seen only growth. There are tons of libraries on the web for React that made React more awesome.

Today, we are going to look into some of the best animation libraries that will help you to create animation. These libraries are easy to install, learn and create animation. You can easily create some cool React animation with these libraries with minimal effort.

So let’s get learning about the best library for creating cool React Animations.

Framer Motion

A production-ready motion library for React. Utilize the power behind Framer, the best prototyping tool for teams. Proudly open source.

Framer Motion

Installation

npm i framer-motion

Usage

Imports

import { motion } from "framer-motion";

Code

In a motion.div tag, you define the animation of the component.

  • animate: You define the properties of the animation here. These are CSS properties. You can enter opacity, x-coordinate, scale, and other CSS properties.
  • transition: You define the transition properties here. Such as repeat, duration, etc.
<motion.div
        animate={{ x: 400, borderRadius: 50 }}
        transition={{ repeat: Infinity, duration: 1 }}
        className="circle"
      />

export default app

CodeSandbox Example

React Spring

react-spring is a spring-physics based animation library that should cover most of your UI related animation needs.

React Spring

Installation

npm i react-spring

Usage

Imports

import { useSpring, animated } from "react-spring";

Code

We have imported two things useSpring and animated.

  • useSpring: We define all the properties of the animation and transition here. from define the initial properties of the element and to is the final properties.
  • animate: It is used to define the element for the transition. It works as a component that takes style as the defined animation in useSpring.
  const props = useSpring({
    to: { y: 200, opacity: 0.5 },
    from: { y: 0, opacity: 1 },
  });

  <animated.div style={props} className="circle"></animated.div>

CodeSandbox Example

React Motion

A spring that solves your animation problems.

React Motion

Installation

npm i react-motion

Usage

Imports

import { Motion, spring } from "react-motion";

Code

  • Motion: Every animation and property is wrapped inside the Motion component. It contains the default style and animation properties using spring.
<Motion
        defaultStyle={{
          translateX: 0,
          opacity: 0,
        }}
        style={{
          translateX: spring(200),
          opacity: spring(1),
        }}
      >
        {(interpolatedStyles) => (
          <div
            style={{
              transform: `translateY(${interpolatedStyles.translateX}px)`,
              opacity: `${interpolatedStyles.opacity}`
            }}
            className="circle"
          ></div>
        )}
      </Motion>

CodeSandbox Example

Refersh to play the animation

Last Note

Adding animations to a website makes it stand out from other websites. These are 3 React animation libraries that I like and use in my project for animation. React component will definitely look better with animations.

You can also look for React transition group for creative React transitive components. If you have any other suggestions, you mention them in the comment.

I hope you will try to use one of the libraries in your next project. Thanks for reading the post.

One thought on “Best Libraries for Animation in React

Leave a Reply to David Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s