React Spring

React Spring Introduction

React spring is a spring physics-based animation library with which we can create most of the UI-related animation in React.

React spring lies between React Motion and Animated which are two existing react animation libraries. React spring is the best of both worlds. It has performance features of Animated and ease of use of React Motion.

Why Springs?

With so many of animation libraries available these days, a question is raised in our minds why should we use react spring.

The answer to this question lies in the way most of the libraries create animations. In most of the other libraries, the developers make the animation in terms of time and curve, but the problem with this approach is, it becomes very difficult to make a real-life animation because things do not look like that in real life.

In react spring there is no predefined curve or time duration. This makes the animations closer to real life.

Using useSpring in React

One of the most basic react spring hooks is useSpring. It makes animated values out of defined values. There are two ways to do this

• Replacing the current props with a new set of props during component re-render.
• Providing an updater function that updates the props using set by returning a different set of props.

Using this is simple because it comes as a hook

Now let's look at both the methods we discussed here:

Overwrite existing props

In this case, the animation will update immediately if you render the component again with the modified props.

Using an updated function

There is no re-rendering in this scenario. This approach is often used for frequent updates. Additionally, it provides a stop argument that may be used to stop animation.

In react spring we move data from one state to another, so spring has two props from and to to show the initial position and the end position of the animation.

React Spring Example Setup

Just like other external libraries, react spring is also very easy to install.

Create a react application and then use npm or yarn to install it

One of the cool things about react spring is the offering of a hook-based API that enables you to specify and transform data that you would typically send as props to animated data.

To better understand react spring let's take a look at close look at all the available hooks in react spring:

• useSpring : A single spring that moves data from a to b.
• useSprings : To animate multiple springs.
• useTrail : Multiple springs are animated one after the anohter
• useTransition : Used for mount/unmount transitions
• useChain : To chain or queue multiple animations.

Installation and Configuration

We talked about the installation of react spring package from npm and yarn. Now its time to learn about some concepts that react sprin uses

Animated Element React spring uses an animated element that handles all the animations. Animated element is just a Higher Order Component or HOC. A HOC is a component that takes a component and returns a new component. So in simple words, an Animated element is a wrapper.

The animated component can be used like any other JSX element, this means that we can add styling to it.

Let's look at some examples, that way it will get more clear on how to use this library.

Examples

We will start off with a simple example that uses the useSpring hook to move a box from {x: 0, y: 0} to {x: 100, y: -100}

Output

Overwrite Values to Change the Animation

By triggering a props change, the animation is updated for each component. This method is preferred for slow-occurring updates.

We can simply use

Pass a Function that Returns Values, and Updates using “set”

In this method, we get an updater function back. No re-render will be caused in this method like in overwrite method but the animation will trigger. This is suitable if there are fast occuring updates.

Here we use the setSprings method to update the values of spring.

Spring Class Component Example

React spring uses hooks that can only be used with functional components. But to use react spring with class components we can use the spring provided by renderprops.

Here is an example that helps to better understand this

Advantage of React Spring Over Other Animation Libraries

React spring has many advantages as compared to other animation libraries.

• Its key benefit is to apply animations without requiring to react to render updates frame by frame.
• This proves to be a very good advantage while working with nested routes or charts.