How To Animate React Components

Adding transitions and animations with React-Spring

Photo by Lucas Fonseca from Pexels

Welcome back! Thank you for stopping by. In this article, we are going to try out the React-Spring library.

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.

We will go through the steps to add this to an existing react application. For this example, We have a simple click counter application that was styled with Material-UI components.

As you can see above, there is not much happening when we click the buttons, and when we refresh the page the components appear to drop down a bit abruptly. Let’s fix that with react-spring. We are going to make the blue Header component scroll down smoothly when the page loads. We’ll see how that looks and go from there.

1 - Install The Library

Navigate into your applications directory and run npm install react-spring.

2 - Import components

Once we have react-spring installed, we need to import the components we will be using. Currently, this is what our Header component looks like.

For this simple animation, we will import the Spring component with the following line.

import { Spring } from 'react-spring/renderprops'

3 - Wrap Components

One of the cool things about react-spring is that we don’t have to change too much in our components. We basically import as we did above, and wrap the component we are returning with the imported Spring component.

import { Spring } from 'react-spring/renderprops'
const useStyles = makeStyles({
  navStyle: {
    flex: 1
  }
})
const Header = () => {
  const classes = useStyles()
  return(
    <Spring >
     { props => (
        insert your components here 
     )}
    </Spring>
  )
}
export default Header

It should look something like this.

4 - Add Necessary Props

The primary task of a Spring is to move data from one state to another.The optional from= prop only plays a role when the component renders first, use the to=prop to update the spring with new values.

Here is a list of props we can pass to Spring.

This image was taken from the react-spring docs.

To achieve the effect that we want, we will use the from= , to= , and config= props. Since we want our navbar to scroll smoothly from the top of the page when the component loads, we will use the marginTop: attribute inside the from= and to= props as we do on lines 26 and 27 below.

Then we want to pass our props to the AppBar component using the style= attribute as we do on line 31 above.

It should look like this on the browser.

Nice, now let’s do something with the counter as well. Let’s make it so it also drops down but after the header is done loading. To do that, we just need to repeat the steps above in our CounterInput component.

This is what it looks like now.

Following the steps above we should end up with something like this.

NOTE: This component is being passed props as well. To avoid any conflicts we change the variable props to args in lines 34 and 35 below.

And just like that, we have added some basic animations to our existing application. You should now be able to see this on the browser.

If this was in any way helpful, informational, or entertaining I’d love to hear from you in the comments. If you have any suggestions on topics you’d like me to cover please don’t hesitate to reach out. As always, stay healthy, stay curious!