How to animate mount and unmount of a react component? (react-spring)

in today's video we're going to animate mount and unmount events of react components we'll start with a simple example in which we'll animate when a component appears and disappears from the screen then we'll take a look at how to do the same but for a collection of components and finally we'll take a look at animations of these events for a collection of components but in a sequence meaning that the animation will be a sequence of shorter animations one after the other we're going to use the react spring library which is an excellent react library to create animations and it conveniently has a hook to animate the mount and unmount events of a component let's take a look how it works we'll get started by creating a new project using create react app we will also install the react spring library which we will use to create the animations in this video i'm going to use the newest version of this library which is version number nine now that we have a fresh react project running let's open it in our editor first let's remove all the code that was provided for us by default by create react app i'm also going to replace the css with some basic simple styling first we have this background color we have some styles to add padding and to center our content but the main thing here is this item object that we're going to animate we give it a width and a height we center it we'll give it the background color and some styling to make it look nicer so the moment if we'll refresh our browser all we have is an empty page with the background color that we specified so let's add elements for these classes we'll add a container for this element we'll also add a button to mount and unmount our item and we'll place the item that we're going to animate within our container now we want to make our example work by adding some code to this mount button that will first of all toggle its label from mount to unmount and second it will hide and show this element that we're going to animate to do that we'll import the use state hook from react we'll add a boolean variable and we'll call it is visible it will default to false because when we first load the page our item will be hidden and then when we click the button we want to toggle the visibility of this item then we want to hide or show our item based on this variable so now when we click this button it shows and hides our element let's also change the label offer button so this is what we built so far we have this mount and mount button that hides and shows this element let's add some animations so instead of simply appearing on the screen this element will slide down and appear from the bottom and then when it unmounts instead of simply disappearing it will slide down and gradually disappear in order to add the animation we're going to import the use transition hook from react spring this hook returns a function we'll see in a moment how to use it let's define it it accepts two arguments first our state variable and second is the configuration object we're going to replace the way we display our item so instead of using is visible we're going to use this transition function which we just created using the use transition hook this function receives a callback with two arguments the first one is style and the second one is item it works in a very similar way to how we displayed the item previously we checked the it's visible variable and dependent on the value of it we displayed either the element or an empty string now instead we check this item variable if it's positive will display the element otherwise an empty string the other thing we need to do is instead of using div directly we'll use a component provided by react spring by using this element from react spring we'll get efficient animations we need to remember and every time we want to animate some element we need to prefix it with this animated variable let's import it from react spring and finally this element will be animated using the style attribute and we get the styles as an object as a first argument to our callback so let's pass it to our element our animation is going to be defined using this configuration object that is currently empty but what we created so far is enough to show and hide our element so we can see that our demo works as before our button hides and shows our element but now we can easily add animations to the mount and unmount events we're going to set up our animation using this configuration object it's going to accept three attributes from enter and leave these are going to be the three states of our animation the interstate describes the item as it appears currently when it's completely visible the from state is from before the mount animation began in our case we want the item to be somewhere at the bottom of the screen and its opacity set to zero and then leave is after the unmount animation has completed let's take a look at our item to determine how our animation should look like first we want to set the position of this item to be relative to the current position we want the position of this item on the y axis to begin from somewhere at the bottom of the screen maybe somewhere around here and the left position to be slightly to the left of the element maybe like this and we want to have this item gradually appear as it slides up so we'll set the opacity to a very low value in the beginning so this will be the beginning of our mounting animation the item will slide from the bottom and slowly appear here so we want the opacity to go from zero to one as the item appears then we want it to slide from the left to the right and from the bottom to the top so let's configure this mounting animation using our object instead of setting the position to relative and the top and the left attributes we can simply use the shortcuts provided by react spring so we can set the x axis to minus 100 the y-axis from the beginning of the animation let's set it to 800 and the opacity will be zero so this is the beginning of our mounting animation now let's describe how we want our item to look after it appears on the screen we want the x-axis to be reset to zero same for the y-axis and we want the item to be fully visible so we'll set the opacity to one so let's take a look at our mounting animation as you can see our animation works and it's really nice how react spring makes it so easy to configure this animation we simply had to specify the beginning and the end of the mount animation and react spring did everything else for us so now let's also animate the unmount event when we unmount the object it will be very similar to the way it appears when it first mounts but the x-axis instead of going away to the left it will disappear to our right so we need to change the x-axis from -100 to plus 100. so let's see how it works this was the mount animation it appeared from x minus 100 to zero and then when it unmounts it disappears but instead of going to the left it goes to the right so this is our first example now we know how to easily animate the mount and unmount events off an element and now let's take a look at what happens if we want to animate several elements instead of just one by the way if you find this video useful please hit the like button so it will reach more people and if you would like to be notified about more videos such as this one which are short and practical videos that teach you something you can use right away please don't forget to subscribe to this channel let's make a small change to our code currently we use this boolean variable to determine if our item should be visible or not but what if instead of a boolean we used an area of items let's try to recreate the same example as we have now but with an array instead of a boolean if we'll have an empty array we'll treat it as if the value is false and nothing should be displayed if we have an array with a single item which is an empty object we will treat it as if there is a single item that needs to be displayed same as it works now so let's try to adjust our code instead of is visible we'll call our variable items we want to set it to an empty array in the beginning because we want our item to be hidden use transition accepts an array as well besides a boolean instead of calling set is visible we'll call set items and i will check if we have an array with a single element we will reset it to an empty array or otherwise we will pass an array with a single object like we described here and we'll apply the same to the label of our button so now our example should work exactly the same as before however now instead of using a boolean we use an array the reason we change to an area is because with an array we can animate multiple items instead of just one let's see what happens if we try to change our single item to be an array of multiple items we'll add two more items and try to run our example again and see what happens you can see that now we can animate three items instead of just one so three items will be rendered by react spring using this code let's try to add some spacing in between these items so we currently pass empty objects but what if we passed the y-axis value of each item after it is mounted to the screen so our first item will be minus 100 on the y-axis so it will be higher second item will be at zero and the third item will be at 100. so let's see how we can pass these attributes and then load them here in the configuration object and use them for each of the items so instead of being positioned at the same location they will be positioned by the values that we pass to them what we can do here is change enter from an object to a callback what we did is we changed enter to accept a callback as an argument and this callback has this argument called item and this item represents each one of the items that we passed to our array then we can use the y attribute of each one of these items to set the value that we want our element to have once it's mounted to the screen so let's try to see how it works so from and leave stayed exactly the same but now when our item is rendered all of the items share the x and the opacity attributes but for each item we set a different y value first item gets its own then the second one then the third one the gaps are a little too big let's change it a little bit also react spring provides another useful shortcut and it is called delay so instead of displaying the items immediately together we can delay their appearance simply by adding a delay value and now let's add a delay attribute to each one of the elements so the appearance of the first item will be delayed by 200 then the second one by 400 and the third one by 600 let's see how it looks so now instead of appearing at the same time and at the same location we added custom attributes to each one of the items so all the items will be rendered using this code using a single element however they'll have different attributes when they're animated and when they're mounted and of course we can do the same for the starting position for the mount and for the unmount as a final step let's change the final animation to a sequence of shorter animations so currently our animation happens in one transition it goes from here to here let's change it to instead happen in two separate animations one after the other so instead of going diagonally squares will first go up and then to their position as we define for each item to do that we can call our next function more than once i've changed the function to be asynchronous and we'll also await the results each time we call the next function so the first time we call this function we don't want to make any changes on the x-axis so we'll only animate on the y-axis then we want the squares to move from this location to their final position when they're mounted so for this animation we don't want any movement on the y-axis we also already have the opacity set to 1 from the first animation so there's no point of doing it again and we don't need the delay anymore so now our mount animation actually consists of two quick animations one after the other first the square come up and then move to their final location let's see if it works now our elements instead of going directly to their place first go to their position as defined in the first call to the next function and then to the second call just to make it nicer let's also configure the width and the height of the element when it mounts so this is the final animation we created in two stages so in this video we learned how to animate mount and unmount events of react components please don't forget to like this video so it will reach more viewers and if you find this video useful and would like to be notified when i upload more videos about react please subscribe to this channel

Channel: BiteSize Academy

Views: 20,579

Keywords: react, react-spring, animate, javascript, create react app, mount, hooks

Id: kT6yYSwK1oA

Length: 14min 7sec (847 seconds)

Published: Thu Feb 25 2021