Simple Animations In React

[Music] this video is sponsored by dev Mountain if you're interested in learning web development iOS or UX design dev Mountain is a 12-week design and development boot camp intended to get you a full-time position in the industry to learn more visit dev mountain comm or click the link in the description below what's going on guys so I've had quite a few requests to do something to do with animations in react and we're going to be looking at a library called react spring today and we're going to create a pretty simple little demo application with it just to give you the foundation of how it works so this is what we'll be creating basically when I load the page componentone will slide down and then component 2 will fade in and you can see we also have a counter here that's going to go from 1 to 10 because we can basically animate props or text and then down here we have a button to toggle component 3 so we can fade that in and out all right so it's pretty simple but I think again it'll give you the foundation you need to create some cool stuff and you probably want to take a look at the documentation there's some really good examples here as you can see so we have spring transitions so we have transitions if keyframes one thing I want to note is that right here it says one of the strengths of spring is that it can apply animations without relying on react to render updates frame by frame like most animation libraries do so with what we're doing it's it's simple enough where you're probably not going to see a difference between other libraries but if you're doing something really advanced and intricate then you're gonna get a better performance from react react spring so let's let's close this out because we're gonna start from scratch here over here and vs code I have just completely wiped out boilerplate that I use create react app I just got rid of all the the default markup and got rid of the logo and all that basically it's just an app j/s and we're rendering out an h1 one thing I did add is is a couple lines of CSS in the app dot CSS just a reset Arial font and increase the font size on the heading so if you want to follow along just generate a new application add that little bit of CSS and you should be good to go so before we run the dev server I'm going to install react spring so we want to do NPM install react - spring and that will install it for us and then what we'll do is create our component one component two in component three so let's run the dev server here with NPM start whoops I have hold on I have something running on that port let me just cancel that out and run that again all right so we just should see just Welcome render out on the page here now I'm gonna create a new folder in the source folder called components and let's create a new file called component one dot J s okay so this is going to be a functional component and I have an extension for V s code called es7 react Redux snippets and using that oops using that I can just do RFC tab or enter and it will generate a functional component if you don't have that extension or you're using a different editor just go ahead and create a functional component just copy this and then we're just gonna put an h1 in here and say component one and let's put a paragraph and we'll just dual arm 30 okay so we'll save that let's bring it into app J s so import components component one from and let's bring that in from component slash component one and I'm going to close up the sidebar to give us some more room and then I'm just going to replace the h1 with component one and save and now we can see our component alright so I'm going to add some initial styling here so let's give this a sty and oops I want a set style equal to and we'll call this c1 style all right and if this stuff confuses you go ahead and watch my react crash course I created about two weeks ago we go over all this stuff I also have a course on udemy call to react front to back so we're going to create a variable down here called c1 style and let's set a background of steel-blue and a color of white and let's do padding let's say 1.5 r m and save and there we go so now we have a little bit of styling to our component now we're going to implement reacts spring so let's go ahead and import we want to import spring from react spring and the way that this works is we want to go into the return here and we want to return spring it's not that we have to return spring but whatever we want to animate we want to put inside of here so I want to animate the whole thing and inside here we want to open up some curly braces and it's going to give us some props and we want to set that to an arrow function and then some parentheses and then we need to have container element that has a style and we pass in props to the style okay so that's how this works and then whatever we want to animate we can put within this div which is going to be our entire output here of our JSX so let's put that right in here just have that over all right now if I save this it's gonna go blank because this spring component here this actually has to have a couple props passed into it which is the from and two props so it works just like you know CSS keyframes we're gonna say from equals double curly brace and then are basically our starting points so let's say we want to start with an opacity zero so it'll basically be an invisible and then let's set to to go to opacity one all right and it will animate from being opacity zero invisible all the way to being completely opaque which would be one so let's save and there we go so you can see that one the page loads it fades in all right now I also want it to come down from the top so I'm gonna add an additional property of margin top and this the starting point will be negative 500 because we want it to be out you know up above out of the screen and then we want to bring it to margin top zero which is its natural position so we'll save and there we go so it's as easy as that to add to create simple animations now component two I want to fade in underneath after this comes down so let's create a new file in components called component to j/s and I'm actually going to do a class-based component here because this is going to have the the button where we want to be able to toggle component three so we need to pass props up and I'll talk about that in a little bit but let's generate a class-based component we can do RCE with with that extension I have installed if you don't have it just go ahead and copy this and it's basically in the render we want let's first bring in react spring civil say import spring from reacts spring and let's grab from componentOne this whole thing right here this whole spring component and we're gonna put that right in the return okay so we'll paste that in now I don't know I don't want the margin top I just wanted to fade in so I'm going to get rid of that and I'm gonna get rid of that and I'm also going to change this to c2 style let's change this title to component two and then let's copy the styling from component one and change it to c2 style c2 and the only difference is going to be the color I'm going to say slate blue all right so let's save that and then we'll go to app j/s and we're going to bring that in so we want to import components to from want to go into the components folder and we want component two and then we'll just embed that down here whoops whoops whoops whoops all right so component two good so what's happening is component two is just being embedded it is fading in as you can see if you look it does it it fades in really quick but it gets pushed down because the component above it is obviously it's going to push it down now what we want to happen is we want to set a delay I also want it to take longer to fade in because it fades in really quick by default so let's go back into component two and let's add here a config and let's set a delay of 1,000 so that's 1000 milliseconds so one second and then let's set the duration to 1000 and save so now it comes in waits a second and then it takes a second to fade in okay so that's that now I want to show you how we can do the inner text so basically if we go to the documentation here kind of shows you how that works right here so this number we can set doesn't have to be number we can call this anything and then we can access that with props okay so we can say props dot number now we want to put this in component one so let's go to component 1 J s and we want to put it right below the paragraph here so right here let's open up another spring tag and as far as the from into we're gonna say from and let's number two 0 initially and then we'll have it end at 10 so let's say from number 0 to number 10 and then just like we did above here we're gonna put in some curly braces you need to do that we'll say props open up some parentheses and then we're gonna have a div and we're gonna give this a style and we want to pass in the props okay and I want to put this in an h1 so I'm going to do an h1 and I'm going to actually give this a style of counter and then we can actually access it with number I'm sorry props okay so this right here and we can access number okay anything we put in here we can access through these props so let's say dot number all right and then for the styling I'm just gonna grab that real quick and paste that and now if I save this you'll see that it goes from 0 to 10 but it goes very fast and it shows decimal points so to fix that let's add in a config ok because we want to slow this down and I'm gonna do a duration of 10 seconds so 10,000 milliseconds and then to get rid of the decimals we'll just simply add on the two fixed method which is just a JavaScript method and save and now it'll take 10 seconds to animate and it'll also get rid of those decimals with the too fixed all right so that's that now we're going to start to look at transitions and the way that this is going to work is we want it to look at a piece of our components state and basically transition based on that so in our app J s I'm going to create some state oops we're gonna go above render and let's create state and let's set that to an object and we'll will create show component well show completes to show component three because that's the one we're toggling and we're gonna set that to false and what I want to do is have an animation so that when we click a button we can fade it in or you could add you know we could position it so it slides in whatever you want to do it it's it's fine now I want to put the button inside of component two so we're gonna have to actually have an event in in on that button and component two to pass up a prop so that we can then create a method here to toggle it alright and then implement the transition so I guess first we'll create the actual component so let's say component three Jas and let's do it's going to be a functional component and it's just going to have an h1 component three paragraph and just add some initial style here so c3 style and I'm just going to grab that all right so this component doesn't really we're not doing anything here it's just basically displaying this markup this JSX here so I'm going to bring this in - to app J s so we want to import component 3 and for now I'm just gonna put it in here and save ok so now it's just there now let's create the button in component 2 so in component 2 I'm going to go below the paragraph and let's create a button and we'll say toggle component 3 and let's add a style of BTN and let's do an on click now remember the state is above us in in-app j/s so we're just gonna say this dot props dot toggle and then we'll catch that up above in-app j/s but let me quickly just add that styling and real quick so let's paste that in alright so we'll save and now component two has a button and when we click that it's gonna call this dot props dot toggle so in app j/s on component two we want to add toggle and set that to whatever we want to happen which I'm just going to call a method called toggle all right and then we'll add that here so we use an arrow function and let's just make sure that it actually works so we'll just say console.log one two three let's open up our tools here and click it and we see one two three all right now I just want this toggle to change the state of show component 3 so we're gonna say this dot set state and we want to set show component 3 to whatever it's not so not this dot state show component 3 alright now obviously we could have it so that we could toggle it and just say if you know if it's true then show it if not then then don't and we could toggle it and it would just disappear but we want it to fade out to transition so that's that's where react spring comes in so let's bring in from react straight react spring transition and we also want which we also want something called animate and that's going to be from react spring all right now I'm going to go down here and I'm going to just get rid of this this component three because what we want to do is put in a transition and this is going to take in quite a few things it's going to take in native and you can see all the different properties here if you go to the documentation for transition so we have like we'll be using from enter you can obviously add config items now items is basically going to be what we want to look at in our case it's going to be this piece of state this show component three so let's add items equals this dot state dot show component three and then we want to have a an enter or is it so we want from enter and leave so let's add those so from we're going to set the opacity to zero and then enter we want to set opacity to one and then leave we want to set opacity to zero so basically we want it to start at opacity zero we don't want it to show at the beginning when it enters we wanted to show so we want to pass the d1 when we click it to leave then we want opacity zero now in here is a little weird we have to open up curly braces just like we did before but we're gonna have this show and then an arrow function and we're gonna say show and and then open up some parentheses and this is where we get our props okay and then we have another arrow function and we set this to parentheses and then we have our div actually you know what in this case we need to use this animate our this should be animated sorry so animated say animated and it's gonna be a div so animated dot div and we're gonna pass in the style here of props okay and then whatever we want to show is going to go in here which is going to be component three so we'll say component three and that should do it so let's save and now if we click this toggle component component three fades in all right so it adds that effect and obviously you could add any any CSS properties or any style properties that you want for these so you can do some cool stuff with it but you know I want to keep this very basic it's basically just so you guys have a foundation so that you can continue on and create some some cool stuff alright so I think that's it I will put a link in the description to this code if you want it to use it for reference also check out the documentation has a bunch of great examples but that's it guys thanks for watching please leave a like if you liked this video if you're not subscribed and you like this type of content please consider subscribing and I'll see you next time

Channel: Traversy Media

Views: 164,639

Keywords: react animations, react animation, animation react, react transition

Id: S8yn3-WpVV8

Length: 20min 47sec (1247 seconds)

Published: Sun Jan 13 2019