Create Route Transitions with React Spring and React Router
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.