Animations in React | React-Spring 2021 | useSpring vs useTransition

hello everyone in this tutorial we are going to demonstrate how to use react spring so i'm only going to use a couple of features in here um the most i think the ones that are most often used so use transition is a popular one so that's the one we're going to demonstrate so i've already created a react type react spring demo if you're not familiar with react to do that you just run the group command npx create react app and then give a name to the app mine was react spring demo then you hit enter you hit enter this will be the name of the react app and then the folder should appear here under some in the youtube directory so in the youtube directory you're going to see a folder with the react app in it and to run this command you need node.js installed on your computer so i've already done that that command takes a couple of minutes to run and this is the default stuff we get so if we cd into our react spring folder we just created and npm start this is going to start the development server and there's the default react stuff that we've seen plenty of times so if we delete everything here in the header tags and save this is all the default stuff for deleting and also the default styling that's delete okay so if we go back in the terminal here and press ctrl c to exit and then we can npm install and then the library we're going to use is react spring so npm install react spring and hit enter there's a dash between react and spring there okay we got package.json we can see react spring is now dependency so if we go to app.js we don't need this logo so let's do it now let's import the react spring stuff we're going to use so we're going to use in this specific example we're going to use use spring animated and use transition and we're going to import that from react spring which is the library we just installed hit save so now we can start using react react spring so in this internet um app div here let's create another div let's give it a class name of top div so this is going to be on top here at the top of the page and let's say it has some words in each one let's say hello world one and save we need to restart the server to actually see what's happening so we closed out the server we need to restart it against npm start so there we go we have hello world one now for top div let's go to f css so this is the styling for app let's go top div let's go height of 100 pixels width of a hundred percent and let's go background color of light blue and save oh so we have a margin because of our h1 tag so let's go h1 margin none and save so that's not working for some reason h1 [Music] let's go margin zero let's see if that works okay so now now we have our div at the top of the page if you wanted and let's go back here so now we're ready to use react spring so to do this we want to animate this right here which is this light blue rectangle and let's say we wanted to come down from the top of the screen when we load when we load our um our page so doing that we can wrap this in something called animated.diff and that's gonna have a style of what's called style one we can name that anything really and we're gonna have closing tags for that animated.div and that in front okay so this is what we're animating whatever's inside these tags and the style that we're going to animate with is called style 1 in this case so let's define style one so const style one and that equals use spring and then we have colon and then brackets not going on parentheses and then brackets and we're going to define from so similar to css to and config so from is where this div is going to start from and then 2 is where we want it to end so if we wanted to come from the top of the page and go come down then we wanted to start from margin [Music] top um let's say since it's at since it's 100 pixels in height we can go 100 pixels but we wanted to come from the top so negative so the margin starts at negative 100 which is going to push this div up right and i don't think we actually need pixels i think just this means pixels i believe comma and now we want the margin to be zero so we want to start at negative 100 and we want to go back to zero which it's at zero right now so it's going to end how it looks right here config we can specify a couple things in config if you go to the library you can see and read all about this library um the one that's probably you're probably going to use the most of duration so how long it takes for this to work so we define duration to be so this is a millisecond so this is 2 000 milliseconds which is two seconds so it's going to come from top and land in this position in two seconds so if we save that you can see on on the reload of the page this is how it works now we can specify others we can specify other things as well so we can go opacity so maybe we want to start with opacity of zero and we want to go to opacity of one and again we want to do this so i change that to one second let's say in three seconds we want this so if we save refresh we can see that it's coming down in three seconds and the opacity is also changing now it's kind of hard to see the opacity with the margin top as well so let's delete that so it's more obvious what's happening here and if we save and refresh we can see that the opacity is coming in slowly in three seconds you can also go faster maybe one second and save refresh okay so that works really nice so let's leave the margin top and let's make it take one and a half seconds and refresh okay so we have that done we can we can keep adding to this we don't only need one we can have multiple things so um this hello world we can animate that so we can go animated div and then animated and [Music] let's give this a style and we'll name it style two let's get rid of this this shouldn't be here so now we're going to animate the h1 with style 2 so let's define style 2 const style 2 use spring and similar format so we're just going to copy and paste this so we're going to go instead of margin top let's go margin left from zero to let's go margin left to [Music] 400 pixels and let's delete this margin talk and we want to do that in the same amount of time so if we save that you can see this is moving over so um let's go zero to zero so we only so this is going to stay at zero and go to zero but this is going to move to the right so we can see that's moving to the right but as we saw before we can have both of them animate at the same time so if i refresh this is coming down and this is moving to the right at the same time so you can you can nest them like this you can have it outside animated div and you have inside animated day okay now that we have that working like we want we can start using use transition now so what we're gonna do is we're gonna do a similar thing where we slide something from left to right on a button click so this was our header that that comes in downwards so let's create another div right and some jsx in here transition this is going to be the name of our style pretty much so transition and then parentheses like that and now style will actually be the universe though we can even say anything i'm gonna go style and now another argument item and if we go equals an arrow so arrow function and if item will return this animated.div and that's gonna have a style equal to this style up here so this is our function transition and it takes there's a style argument and an item and we're passing that style to our animated div and inside of here this is what we're what's going to appear so this is what we're sliding so let's give this class name let's call it div 2 52 is going to say hello save don't worry about that for now so i already had div 2 defined here so you can define div 2 like this i'll change this to orange so you can see the hello we wrote and save so make sure you give dick to it with an eye and a background color so you can see it's sliding in so that's our div two and so if i don't return this if not we'll return nothing and save that transition is not defined this is not defined so let's define it up here so you know const transition so we're now what we're doing is we're defining transition and we can set that equal to use transition which we've imported up here and now similar to this it's not exactly the same so we're going to copy it because a lot of it is the same but not completely so we have from so that's where we're starting then we have enter so this is how it's entering the screen and then this is how it's going to leave the screen so we have to specify x and y values so let's copy that for all of them and okay so x let's say so we gave this oops we gave the div a width of 200 so if x is negative 200 that means it's going to be off the screen so if it's 200 it's going to be on the left if it's 0 it's going to be on the left side so right on the screen so you go zero and negative 200 means it means it's going to be off the screen to the left so it's going to start not in the screen then when we hit a button it's going to enter the screen because it's 0 now or we can make this 100 or whatever and then off the screen again negative 200 any negative 200 or less than it's gonna be off the screen so y 0 we don't want to change the location of y we just want it to slide horizontally for now we can change that later so let's save okay um the used transition actually takes in an argument and this is just going to be something that switches from true to false so slide in set slide in and we're going to start with use a so this is going to start out as being false and it automatically imported use date for me um make sure if it doesn't do that for you make sure you you type that out import you state from react so so if you don't know how you states work make sure to check out my um react tutorial video on that i'm assuming everyone here knows how to use use state and now so on buttons like we said there's going to be a button that changes this right so let's have a button here and that's on click function is going to be called move me so move the div move me and it's going to say move me and closing tag for the button save now we need to define movement so this is the function that actually moves the button or the this is what triggers it to move so this triggers so from enter and leave this functions on when this changes so when slide in changes from true to false this is this starts activating so the change slide in we have to use that slide in so set slide in to be the opposite of slide in so slide in is true we want to change it to false if it's false we want to change it to true so we can do that doing this and save okay looks like the error was we don't need these brackets so let's delete those brackets and save and [Music] let's refresh okay so now that's working and let's hit move me you can see this slides in and it slides back out now let's say we want to slide from the left and also down so it starts at zero goes down 100 pixels and goes back up to where it was so let's save to refresh now move me you see how it slides down let's make it slide to 100 and save let's not make it so tall so we can see the bottom of it easier so 300 okay so refresh and move me so it goes to this location and then we hit move me again it's gonna go back out now what we can do is so this moves here maybe we want it to move there on leave instead of back out so if we do that so x doesn't go to negative 200 it goes to let's say positive 300 and save refresh let's hit move me and then move me again but then it disappears because it's expecting it to leave so that's a limitation there so you hit refresh and move me so it's better to use this for something that you want to disappear if you're going to use it in this manner so on let's refresh so on screen and then move me now this hello world back to the solo world we can see that we kind of don't see the the transition until later on because it's coming down so style two okay so this takes one and a half seconds to do its thing so we can go delay here one and a half seconds okay so it's delayed one and a half seconds so it's going to wait for this to finish and then it's gonna do its move so if we save this and refresh okay so i figured out what the problem was the problem was this delay should not be ident or identified here so we'll delete that it should actually be its own own thing so if we move that up here and style to and save then refresh we can see hello world comes down and then once this has moved all the way down then it starts moving to the right okay so that's how you use spring to use spring and also use transition i hope you enjoyed this video um please subscribe like and share this video if you found it useful

Channel: Avoid Infinite Loops

Views: 130

Keywords:

Id: vvDqM6v6Hwk

Length: 22min 12sec (1332 seconds)

Published: Fri Oct 08 2021