Animations in React Using React-Spring 2021 | useSpring Tutorial

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 up 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 mindless 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 into 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 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 100 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 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 to do that we can wrap this in something called animated.diff and that's gonna have 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 let's say since it's at since it's 100 pixels in height we can go 100 pixels but we want it 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 margins up and let's make it take one and a half seconds and refresh okay so we have that done um 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 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 gonna stay at zero and go to zero but this is gonna 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 an outside animated div and you have inside animated

Channel: Avoid Infinite Loops

Views: 44

Keywords:

Id: Xn3NvuosT44

Length: 11min 48sec (708 seconds)

Published: Fri Oct 08 2021