How to Create Animations using React Spring?

How to Create Animations using React Spring?

In this react-spring tutorial, you'll learn how to create animations using React Spring. We will be looking at two of the five hooks included in react-spring, specifically useSpring and useTrail. react-spring inherits from animated and react-motion for interpolations, optimized performance, and a clean API.

Have you ever needed animation in your React application? Traditionally, implementing animation has not an easy feat to accomplish. We there’s a new React tool just for that. react-spring inherits from animated and react-motion for interpolations, optimized performance, and a clean API.

In this tutorial, we will be looking at two of the five hooks included in react-spring, specifically useSpring and useTrail. The examples we’ll implement make use of both APIs.

If you want to follow along, install react-spring to kick things off:

## yarn
yarn add react-spring

## npm
npm install react-spring --save

Spring

The Spring prop can be used for moving data from one state to another. We are provided with a from and to prop to help us define the animation’s starting and ending states. The from prop determines the initial state of the data during render, while we use to in stating where it should to be after the animation completes.

In the first example, we will make use of the render prop version of creating spring animation.

On initial render, we want to hide a box, and slide it down to the center of the page when a button is clicked. It’s possible to do this without making use of react-spring, of course, but we want to animate the entrance of the box in to view and only when the button is clicked.

class App extends React.Component {
  state = {
    content: false
  }

  displayContent = (e) => {
    e.preventDefault()
    this.setState({ content: !this.state.content })
  }

  render() {
    return (
      <div className="container">
          // The button that toggles the animation
          <div className="button-container">
            <button
              onClick={this.displayContent}
              className="button">
                Toggle Content
            </button>
          </div>
          {
            !this.state.content ?
              (
                // Content in the main container
                <div>
                  No Content
                </div>
              )
            : (
              // We call Spring and define the from and to props
              <Spring
                from={{
                  // Start invisible and offscreen
                  opacity: 0, marginTop: -1000,
                }}
                to={{
                  // End fully visible and in the middle of the screen
                  opacity: 1, marginTop: 0,
                }}
              >
                { props => (
                  // The actual box that slides down
                  <div  className="box" style={ props }>
                    <h1>
                      This content slid down. Thanks to React Spring
                    </h1>
                  </div>
              )}
            </Spring>
            )
        }
      </div>
    )
  }
}

Most of the code is basic React that you might already be used to seeing. We make use of react-spring in the section where we want to conditionally render the content after the value of content has been changed to true. In this example, we want the content to slide in from the top to the center of the page, so we make use of marginTop and set it to a value of -1000 to position it offscreen, then define an opacity of 0 as our values for the from prop. This means the box will initially come from the top of the page and be invisible.

Clicking the button after the component renders updates the state of the component and causes the content to slide down from the top of the page.

We can also implement the above example using the hooks API. For this, we’ll be making use of the useSpring and animated hooks, alongside React’s built-in hooks.

const App = () => {
  const [contentStatus, displayContent] = React.useState(false);
  // Here's our useSpring Hook to define start and end states
  const contentProps = useSpring({
    opacity: contentStatus ? 1 : 0,
    marginTop: contentStatus ? 0 : -1000
  })
  return (
    <div className="container">
      <div className="button-container">
        <button
          onClick={() => displayContent(a => !a)}
          className="button">Toggle Content</button>
      </div>
        {
          !contentStatus ?
            (
              <div>
                No Content
              </div>
            )
          : (
            // Here's where the animated hook comes into play
            <animated.div className="box" style={ contentProps }>
              <h1>
                This content slid down. Thanks to React Spring
              </h1>
            </animated.div>
          )
        }
    </div>
  )
}

First, we set up the state for the component. Then we make use of useSpring to set up the animations we need. When contentStatus is true, we want the values of marginTop and opacity to be 0 and 1, respectively. Else, they should be -1000 and 0. These values are assigned to contentProps which we then pass as props to animated.div.

When the value of contentStatus changes, as a result of clicking the button, the values of opacity and marginTop changes alongside. This cause the content to slide down.

Trail

The Trail prop animates a list of items. The animation is applied to the first item, then the siblings follow suit. To see how that works out, we’ll build a component that makes a GET request to fetch a list of users, then we will animate how they render. Like we did with Spring, we’ll see how to do this using both the render props and hooks API separately.

First, the render props.

class App extends React.Component {
  state = {
    isLoading: true,
    users: [],
    error: null
  };

  // We're using the Fetch <abbr>API</abbr> to grab user data
  // https://css-tricks.com/using-data-in-react-with-the-fetch-api-and-axios/
  fetchUsers() {
    fetch(`https://jsonplaceholder.typicode.com/users`)
      .then(response => response.json())
      .then(data =>
        // More on setState: https://css-tricks.com/understanding-react-setstate/
        this.setState({
          users: data,
          isLoading: false,
        })
      )
      .catch(error => this.setState({ error, isLoading: false }));
  }

  componentDidMount() {
    this.fetchUsers();
  }

  render() {
    const { isLoading, users, error } = this.state;
    return (
      <div>
        <h1>Random User</h1>
        {error ? <p>{error.message}</p> : null}
        {!isLoading ? (
          // Let's define the items, keys and states using Trail
          <Trail
            items={users}
            keys={user => user.id}
            from={{ marginLeft: -20, opacity: 0, transform: 'translate3d(0,-40px,0)' }}
            to={{ marginLeft: 20, opacity: 1, transform: 'translate3d(0,0px,0)' }}
          >
          {user => props => (
          <div style={props} className="box">
            {user.username}
          </div>
        )}
      </Trail>
        ) : (
          <h3>Loading...</h3>
        )}
      </div>
    );
  }
}

When the component mounts, we make a request to fetch some random users from a third-party API service. Then, we update this.state.users using the data the API returns. We could list the users without animation, and that will look like this:

users.map(user => {
  const { username, name, email } = user;
  return (
    <div key={username}>
      <p>{username}</p>
    </div>
  );
})

But since we want to animate the list, we have to pass the items as props to the Trail component:

<Trail
  items={users}
  keys={user => user.id}
  from={{ marginLeft: -20, opacity: 0, transform: 'translate3d(0,-40px,0)' }}
  to={{ marginLeft: 20, opacity: 1, transform: 'translate3d(0,0px,0)' }}
>
  {user => props => (
    <div style={props} className="box">
      {user.username}
    </div>
  )}
</Trail>

We set the keys to the ID of each user. You can see we are also making use of the from and to props to determine where the animation should start and end.

Now our list of users slides in with a subtle animation:

The hooks API gives us access to useTrail hook. Since we are not making use of a class component, we can make use of the useEffect hook (which is similar to componentDidMount and componentDidUpdate lifecycle methods) to fetch the users when the component mounts.

const App = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/users`)
      .then(response => response.json())
      .then(data =>
        setUsers(data)
      )
  }, [])

  const trail = useTrail(users.length, {
    from: { marginLeft: -20, opacity: 0, transform: 'translate3d(0,-40px,0)' },
    to: { marginLeft: 20, opacity: 1, transform: 'translate3d(0,0px,0)' }
  })

  return (
    <React.Fragment>
      <h1>Random User</h1>
      {trail.map((props, index) => {
        return (
          <animated.div
            key={users[index]}
            style={props}
            className="box"
          >
            {users[index].username}
          </animated.div>
        )
      })}
    </React.Fragment>
  );
}

We have the initial state of users set to an empty array. Using useEffect, we fetch the users from the API and set a new state using the setUsers method we created with help from the useState hook.

Using the useTrail hook, we create the animated style passing it values for from and to, and we also pass in the length of the items we want to animate. In the part where we want to render the list of users, we return the array containing the animated props.

Go, spring into action!

Now you have a new and relatively easy way to work with animations in React.

While you’re at it, ensure you check out the official website of react-spring because there are tons of demo to get your creative juices flowing with animation ideas.

React JavaScript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

Top VSCode Extensions for React, React Native, JavaScript and Productivity

Bunch of VSCode Extensions that improve quality of your coding time no matter what stack you are using. In this post, you'll see Top VSCode Extensions for React, React Native, JavaScript and Productivity

Routing in React without React-Router

I have been using React JS in my projects for quite some time now and am used to managing routing in my app using the react-router package. I have always been keen on having as little dependencies in my apps as possible, so, I always felt perturbed by the use of this particular package in simpler apps which did not have complex routes.

React Hello World: Your First React App

The best way to learn React is to re-create Hello World but for React. Let's learn all there is to know about building a simple Hello World app in React! This tutorial will thoroughly explain everything there is to know about creating a new React app in the quickest way possible. If you’re someone who wants to learn how to spin up a brand new React app, then this tutorial is for you.