Everything you need to know about React Animation

Animation is one of the most important parts of UX. It adds some amazing feel for the users and brings life to the application. However, implementing effective animation is not that easy. Especially when there are many variations of the devices. That is why we must analyze and consider the most simplified and optimized way to create and manage the animations in react.

React is a well-established front-end library now. If you know how to utilize it properly, you can do almost anything. There are multiple options of doing animation with react library. You can create animations in React using CSS, JS, or by using an external JavaScript library. If you want to be free from hassle, you can use this library named React-Spring. It is highly optimized and simplified for animating React components.

React-Spring is a modern React library based on Spring-physics which is highly flexible and it covers almost all of the UI animation needs. It inherits animated powerful interpolations and performance, as well as React-motion’s ease of use. Let’s discuss some basics of this animation library.

React-Spring Fundamentals

Since React-Spring is a modern animation library, it supports both hooks-based API and the traditional class-based API. The hook-based API is based on 5 kinds of hooks while the class-based API is based on the react-spring components. As the React community is now focussing on functional components for simplicity so we will proceed with the hooks API. These concepts can be interpreted with the class-based API as well because the basics remain the same.

Spring is the basic component of the library and we will use that oftentimes. It acts as a building block of the animations in React-Spring. Spring means a factor that helps a component to move from one point/place to another.

There are 5 major hooks in React-Spring:

1. useSpring — a single spring that moves data from a → b
2. useSprings — multiple springs, for lists, where each spring moves data from a → b
3. useTransition — where we need to mount(add)/unmount(remove) elements transitions
4. useTrail — multiple springs where one spring trails/follows behind the other.
5. useChain — to queue or chain multiple animations together.

A Basic Demo

Here, we are using the useSpring hook for defining two springs. It is clearly evident that we are taking an object named “from” where the initial value is assigned and a “number” property that signifies the final value. Similarly in the second spring, we are using a “from” object to define the initial value, the opacity property for the final value, and the delay property for the delay in animation. Also, we’re using a component defined in react-spring called animated in order to animate our wrapped components.

In this way, the springs also handle other things like CSS properties, colors, absolute lengths, relative lengths, angles, scrolls, HTML attributes, string patterns, and a lot more.

Now that we know the basics of Spring, let’s jump on to some advanced stuff.