Fade-in and fade-out animation with spring and transition React Hooks
Tags: webdev, react, node, typescript
Published: 2020-02-10 17:23:02

## Introduction

The <a title="React Spring" href="https://react-spring.io/">React Spring</a> library has a modern way of approaching animations by using a physics-based model. You can configure animations using real-life values like **mass**, **friction**, and **tension**, which allow you to create more believable transitions. There is also an option for duration-based approach. The library has great performance and an easy-to-use API. <a  title="React Spring" href="https://react-spring.io/">React Spring</a> is cross-platform and has quite a optimal bundle size.

## Render props API vs hooks API

The release of <a  title="React Version 16.8" href="https://reactjs.org/blog/2019/02/06/react-v16.8.0.html">React version 16.8</a> introduced hooks, which enable you to use **state**, **component methods**, and other features without writing a class. The React Spring team introduced a new Hooks API in version 7.0. At the moment, there are 5 React Spring hooks: **useSpring**, **useSprings**, **useTrail**, **useTransition**, and **useChain**. Hooks allow us to create much cleaner code and avoid so-called **render props hell**.

![Render Props Hell](https://dev-to-uploads.s3.amazonaws.com/i/0i5tdh87av2u5v73lm1v.png)

## Installing

You can check out final code on our <a  title="GitHub" href="https://github.com/atherosai/next-react-graphql-apollo-hooks">GitHub</a>. Clone GitHub repository using this command:

``` bash
git clone git@github.com:atherosai/next-react-graphql-apollo-hooks.git
```

Then install npm modules using:

``` bash
npm i
```

And finally, use the following command to run the node server:

``` bash
npm run dev
```

## Animating carousel, changing the text (fade-in, fade-out)

In the following example we will code multiple changing titles, which you can apply to your carousel or whichever way you see fit.

![Fading Titles](https://dev-to-uploads.s3.amazonaws.com/i/ctvvm76k36v8ssygjq9o.gif)

If we want to use items that are added and removed, we need to import the **useTransition** hook. When we import an **animated**, we need to put it in front of **div** to signalise that it is an **animated div**.

{% gist https://gist.github.com/CharlieCharlson/fc05d2022e5ccfe1b7c22ce59162e5b7 %}

Using React hooks we can initialise the items array, where each object contains a **title** string, which will be shown on screen, and an **id** number, which we will need later on in the **transition** hooks to identify the specific **title**.


{% gist https://gist.github.com/CharlieCharlson/732b918f4403963d96e2b41b3e44adf3 %}

Also, we need to define the **index** and **setIndex** state hooks to control the current index of **items** shown on screen.

{% gist https://gist.github.com/CharlieCharlson/93c6a6658020c56ca83e5706b49e96cd %}

Now we will finally add the **transition** hook:

{% gist https://gist.github.com/CharlieCharlson/e00b6e1f336e0bc640753b39478ee021 %}

The first argument is the current item of the array; the second one is the item **id**; and the third is the object where we define the three different stages of animation. These stages are as follows: an animation starts at the **from** variable, goes to **enter** and ends at **leave**.

For this animation, we are going to use the **opacity** variable, but you can work with any CSS variable for other animations. In this **config**, we set the **tension to 220** and the **friction to 120**, but try to play around with these values to see what they really do. You can also use some presets for this animation, but they have quite short durations. There is also an option to use a duration-based approach. If you want to use a precise time in milliseconds, simply type **config: { duration: 1000 }**.

These lines in the function component adds a loop using the **setInterval** function, where the current index is set to another one every 4 seconds. The **modulo operator** expression assures that when the current index points to the last item, it gets set to the first item. Make sure you clear the interval to avoid memory leaks.

{% gist https://gist.github.com/CharlieCharlson/52b00748e6dea3b8038a97a7e9ef77aa %}

You have to create a **map** function of the transition hooks with the following arguments. The first one is the current item of an array; props are the CSS values; and the key is the specific id you set in the **useTransition** hook.

Then you can add a special HTML tag, **animated.div**, which activates the React Spring animation. For this example, I used **inline styles** so you can see it more clearly. However, the only important style is the **absolute** position in the **div** container, so the texts can overlap each other.

{% gist https://gist.github.com/CharlieCharlson/aeac972ad12a92af36019e220d16552f %}

## Conclusion

If you want to delve deeper into <a title="React Spring" href="https://react-spring.io/">React Spring</a> animations, visit the official <a title="React Spring" href="https://react-spring.io/">React Spring</a> website. You can learn different animation methods using **useTrail** or **useChain** hooks, for example, or explore the countless examples posted on the website. Also check out our <a  title="High-performance boilerplate" href="https://github.com/atherosai/next-react-graphql-apollo-hooks">high-performance boilerplate</a> consisting of **React**, **Apollo**, **Next.js**, **GraphQL**, and **Node.js**. <a title="High-performance boilerplate" href="https://github.com/atherosai/next-react-graphql-apollo-hooks/blob/feat/typescript/components/HomePage/CarouselHooks/CarouselHooks.tsx">Here</a> you can find the final code as well as two other basic loading animations for carousels.

> Did you like this post? You can clone <a title="GitHub repository" href="https://github.com/atherosai/next-react-graphql-apollo-hooks">the repository with the examples and project set-up</a>. 
> Feel free to send any questions about the topic to <a href="mailto:karel@atheros.ai" title="Contact">karel@atheros.ai</a>.