Chain Together Multiple Animations With the useSpring Hook

Animate Elements With the useSpring Hook

Animate CSS Background Position With the useSpring Hook

Create Smooth List Transitions With the useTransition Hook

Create Route Transitions with React Spring and React Router

Spring Animation in React with React Spring

React Spring's `useTransition` can be used with React Router to create smooth transitions between your routes!

In this lesson, you will configure `useTransition` and create its three animated states. You will then map over the transitions and return React Router's Switch and Routes wrapped in an `animated.div` element.

Christian Nwamba: [0:00] To animate React route using React Spring, first thing that we need to do is to import the React Spring library. Let's import animated as well as useTransition from the library.

[0:24] Let's create a transition. First, create a variable to store this transition. This is going to store the returned value of useTransition. useTransition takes three arguments. The first arguments are the items you want to iterate over. In this case, we want to iterate over the location.

[0:47] Secondly, it takes a function that tells this transition what the key of each of these items should be. This function would receive a location argument and we'll return the pathname as the key of this transition.

[1:05] The third argument is a configuration object that defines each of the stages of the transition.

[1:12] First stage of a transition is where this transition starts from, basically what the initial state is. Usually, we have to set things to  here. Set the opacity to  and also set width to %.

[1:31] The second stage of this transition is the enter stage, which is what happens when the page is fully loaded. We want to set the opacity to 1 and width to 100%.

[1:41] The third stage is what happens when the page exits. This is called the leave stage. I want to set the width to  and also set opacity to .

[1:59] Lastly, we can use these transitions to animate our routes. First of all, we need to map through each of these transitions. This map meta takes a callback as usual. It receives an object with the item we want to iterate over. We can alias this to the location, as well as the status properties that we receive from the animation, and then the key for each of these items.

[2:30] We can return animated.div. This is a special kind of div that can understand the CSS properties or the CSS styles that are received from the animation. What we can do to get all this working together is to copy the Switch code we have below here and paste it right here.

[2:55] For these animations to work, we need to set the animation.div style. We need to set it to props. Then we also need to set the key for each of these items to key. If we reload the browser and start navigating, you can see that we have items moving in smoothly and out.

Course

Spring Animation in React with React Spring

Create Route Transitions with React Spring and React Router

Share this video with your friends