Breathe & Relax App - JavaScript & CSS Animations

[Music] hey what's going on guys in this video we're going to create a breathing relaxation web app just a really simple animation using CSS animations and JavaScript and of course HTML and I really like this project because it shows you how to use JavaScript along with CSS animations and this is part of my 20 web projects with vanilla JavaScript course on udemy which I'll have a link to in the description with a promo code if you're interested and I also have the github repo which has all 20 projects including this one if you want to take a look at the code also have the background image in here and whatever you need so we're gonna go ahead and create this so let's jump into vs code and what I have here is just an image folder with the background image and of course you can use any background image you want and then I just have my HTML my CSS and my script J s file so we're gonna start with the HTML so we'll create a boilerplate here and just call this relaxer and let's put in our style sheet and then in the body we'll have an h1 and say relaxer now as far as the the the elements here that we're gonna create with our HTML I just want to explain what they are so basically around this whole thing we're gonna have a container and then within that we're gonna have a circle class which represents this the solid circle and behind it will be a gradient circle so this gives you the effect of this has like a multicolored border but it's actually just a circle behind it using the position property we're gonna position it behind it and give it a gradient color and then this white circle that spins around it that'll be the pointer and we'll use CSS animations to create this effect and then we just have some a simple paragraph that's going to change based on where and the animation it is alright so let's go ahead and create the div with the class of circles so that's going to represent the solid colored circle we'll have a paragraph I'll give that an idea of text we don't have to put anything in it because it'll get inserted dynamically into the Dom through JavaScript and then we'll have the point or container so this is going to wrap around the pointer class which is going to be that little white circle and then we want the gradient circle so that's the circle that's behind it that gives it that border effect and that's actually it for the HTML we just need to oh a container I'm sorry we need to have the container wrap around everything so this div needs to go down here and wrap around everything you know what let me put on format on save I don't know why I don't have that enabled let's see format unsaved I must have shut that off for some reason there we go now we just need to link in the script so we'll say script source and I called it script J s now I'm gonna take a different approach in the course I believe I just went right to the CSS in this case I'm gonna just I want to do the JavaScript first there's really not that much there's only maybe 20 lines or so so I want to bring in a couple things one is the container which wraps around everything so it's a document query selector and we'll select the class of container and then we have the text the paragraph with the ID of text so we'll say document dot query selector or get element by ID and we'll put an idea of text or grab the idea of text now as far as the the animation time from let me just show you from the from when it starts here and it goes all the way around so a full rotation I want that to be seven and a half seconds that seems to be a good number and then I want to break it up into you know the breathe so from here to here three seconds the hold will be one and a half seconds and then breathe out three seconds which all adds up to seven and so let's create a variable here called total time and set this to 7500 so 7,500 milliseconds and then let's create the brief time now instead of hard-coding this I'm going to take the total time and divide that by 5 so that's going to give me 1.5 in this case and then I'm gonna multiply that by 2 and I did this I don't want to hard-code it because if just in case we happen to change this number so that'll be our brief time which in our case will be 3 seconds and then let's get the whole time so to calculate that I'm just gonna take the total time and divide by 5 and that's gonna give me one and a half or one you know fifteen hundred milliseconds alright now we want a function to constantly run so we're gonna create a function called breathe animation okay so breathe animation and then we immediately want to set the text because there's nothing in that by default so let's set that to breathe in because it's the first instruction and then the container the web constructor container so the way that the can the the how this expands inner tracks will have a container and it's going to either have a class of grow which is going to make it expand or a class of shrink that will make it shrink and we'll be able to make that happen with CSS animations but we need to add and remove those classes so we want to start off with the container having a class name or actually two classes one is container but we also want to have it have the grow class now we need to use the set timeout function here which what this does it takes in a function so we'll use an arrow function and then as a second parameter it takes in the time to wait until you execute whatever you put in this function so for instance if I put three thousand that's three seconds or 3,000 milliseconds so it wait this long until you know if I put like a console log or something in here it'll wait three seconds until it runs that now we don't want a hard-coded number in here we want the breathe time in here because we want to wait that amount of time which in our case is going to be three seconds and or it could change based on the total time now what I want to happen in here is to change the text so to say text in our text so inner text will just change you know the text that's inside that paragraph we want to change it to hold after this amount of time okay now inside this set timeout I'm gonna have another set timeout with a function and in heat here as far as what the amount of time to wait is gonna be the whole time okay so after that whole time that which is going to be that one point five seconds we then want to breathe out so we'll change the text in our text and we'll change that to breathe out now at the same time we want to add the shrink class because that's when we want the circle to start to scale down so let's take the container and let's add to the class name property and let's make that container and shrink and you can use add class class let's add class and remove class if you want but this is just a simple way of doing it okay so this is our function now we want to call this immediately so I'm going to call breathe animation here but we also want to run this every seven and a half seconds or whatever we have in this total time variable so we can do that with set interval so set interval will take in a function which in our case is going to be breathe an amazing and it'll run it every whatever this case it would be every three seconds but we want to put in here the total time so we want to run it every seven and a half seconds and that's it that's our JavaScript now if we save this and we take a look at our app which open with live server the text should change so breathe in hold breathe out so breathe in and breathe out we'll be three seconds hold to be one-and-a-half seconds now when obviously we that's all it's happening because we don't have the CSS to show the circle and the animations and stuff like that so that's a work on next so let's jump into style.css I am gonna just paste in some of the basic stuff here like importing our font I'm using monserrat and then a box sizing set to border box background I'm setting to the BG dot jpg that I have centering it I am displaying flex here and changing it to a column instead of a row and then aligning the body to this just pushing everything into the center now for the container and I'll just go ahead and save this and we can see what it looks like so that's what it's gonna look like we have no circle or anything we just see the text change so for the container this wraps around everything and I'm gonna set this to display flex and I want to align everything we want to align items to the center and we also want to justify content to the center which will put it in the middle on both the X and y-axis or the other the main and the cross access and we want to set the let's set the height to 300 pixels and the width to 300 pixels on the container and I'm going to set the margin to auto to make sure it's in the middle and we want to position this relative because we want to position the circles absolute within the container and then as far as the transform goes we're going to set this to scale and then one which is just the default the default scaling because the way that we're going to make this extract and and or expand and retract is with this scale property or the transform scale property here because remember we have that show actually I can if I go back here and I open up my tools you'll see on the container see the grow class now it's shrink so that's going to continuously change because of our JavaScript so we're going to take advantage of that and make our circle expand and then retract but first we need to create the circles so I believe that's all we need for the for the container so let's move on to I'm actually gonna do the gradient circle first because the gradient circle is going to be behind the solid circle so just to clarify this right here it looks like it's like a border but it's it's a gradient circle and then this solid circle is positioned over it so we're gonna do the gradient one first the one that's behind so gradient circle as far as the background I'm gonna use the cone ik Konak or conic gradient property which takes in just a bunch of different colors and you can set the percentage of each color okay so I pasted this in because it's I don't want to want to type all this oh but these are the colors and the percentages now if you want if you want this to be a completely different look different color you can change these values if you'd like now the height and the width I'm gonna set slightly larger than the other circle or slightly larger than the container which is 300 pixels so I'm going to set this to 320 the height and the width and I also want to move it up and over to the left because I want it to be directly behind the other circle I don't want it to start in the same place so let's set the top to negative 10 pixels and let's set the left to negative 10 pixels that will move it up and over whoops all right and then in addition to this we need it behind the the solid colored circle so we're gonna set the z-index here to negative two which will move it behind it and then of course to make it a circle because right now if I save let's go to our project so right now it looks like this so we need this to be a circle so we can do that with border radius so border radius 50% and that will change it to a circle now we want to position this absolute within the container so let's position to absolute yeah and actually I'm just gonna I'm just gonna move this right here right above where we have the the top and the left all right and I think we should be all set so now you can see that it's positioned in the container absolute we have the text right in the middle which is what we want and now we want the solid color circle in front of it so let's do that next so circle remember this is the solid color circle so I'm going to add a background color and the color is going to be 0 1 0 and then f1c which is a dark color and then let's set the height so remember the container is 300 pixels so I'm going to set the height and the width to a hundred percent of that container and remember the gradient is 320 so it's gonna peek out a little bit give it that border effect and then as far as the the position that's also going to be absolute within the container but we're gonna set it the set top zero left zero that way it's right in the middle of this one here which is slightly moved up and over okay and then let's see as far as the z-index goes we want this to be in front of the other one so I'll set it to negative one because the gradient is set to negative - so let's save that and let's take a look okay so it's still a box we need to add our border-radius I'll just copy that and now if we take a look good so that's exactly what we want now as far as the pointer we need to add that which is the little white circle that goes around it and we haven't added the the shrink and grow effect either but I just want to get the pointer in there so let's do that so we have a pointer container so the point to container I'm going to set this to position absolute within the container the or the main container I should say I'm gonna place it negative 40 pixels from the top because remember we want it to be up above and then from the left let's say 140 pixels we wanted to start at the top middle right now the width of the the pointer itself will be 20 pixels and we're gonna set the height to 190 pixels now this is the container not the actual pointer itself and then the animation will just add that after but if we save this and we take a look we're not going to see anything because it's just the container so let's add the actual pointer so the pointer I'm going to set a background color of white and it needs to be a circle so let's say border radius 50% and the height of the pointer will be 20 pixels and the width will be 20 pixels and let's just display this as a block and if we save that now we just have this little white circle that's right above the the larger circle so now we need to implement the animations we have everything styled but we don't have any animation so we'll have basically three different things here we want wrote we want rotate which is going to have the point to rotate around everything we want grow which is going to make this grow or extract whatever you want to call it and then shrink which will make it shrink back down on the breathe out so let's go let's add a rotate animation we're going to use a CSS keyframe so at keyframes and then we can name this I'm going to call it rotate this could technically be called whatever you want and we could put percentages in here if you want something to happen at certain points certain percentages or we can just use from and - which is what I'm going to do here so we want to start with a certain thing in this case a rotation position so we want to use the transform property and then rotate and we want to start at zero degrees okay and then for the two we want to put in transform and for rotate we want it to go full circle so this is going to be 360 so 360 degrees now the rotation we won't actually want to put it on the container and this might be a little confusing the container so what I'm going to do is just give this a temporary background so you can actually see what this is because you're probably confused like this has a height of 190 so if we take a look at this this is what it looked this is the container so it basically goes from the middle up here and this is what we want to rotate this way so from 0 degrees which is at now all the way 360 to do a full turn so I think that hopefully that can that helps you visualize this a little better so let's put our animation on here we want to use our rotate animation our keyframe and the time is really important we want this to be 7.5 seconds just like our JavaScript and we want this to be linear forwards and infinite because we want it to keep going we don't want it to just make one swoop and then stop we wanted to keep going so yeah and then we also want to add a transform origin which is it sets the origin for the elements transformation and that's going to be bottom center so if I save that and we take a look you can see exactly how this is working with this background here almost like a clock so I want to remove that obviously I don't want that red background that's just so you can see how this is working so I'm going to get rid of that red background and now it just floats around alright now we want this to expand and it might mess up until you reload just because the JavaScript and the CSS have to be you know synchronous so this we want to go in and out and remember we have that show and shrink class getting added I'm sorry grow and shrink you can see right here so shrink now it's grow so we want to take advantage of that and create our animations for that so I'm gonna copy this keyframes here so we'll paste that in paste that and twice this is gonna be grow and instead of rotate on the from we want to use scale that's how we're gonna give it that effect and it's gonna start at 1 which is just the default scale and then 2 so grow is gonna scale to 1.2 okay so that's the largest it's gonna get and then for shrink for shrink we want to set the scale 21.2 because remember when it's finished growing it's gonna be at one point - so that's where we start with for shrink and then we want to shrink down back to one okay so pretty easy now where we want to apply these these two animations is on the container but only when they have those certain classes so let's say if the container has a class of grow then we want to add that animation of grow for three seconds and we also want to add forwards or linear and forwards and then I'll just grab this we'll copy that down and then for shrink we want to change both of these to shrink both the class name and the animation so let's save that let's take a look I'm just going to reload and now it's gonna grow it's still you know when it hits here it hits hold and then breathe out and then it retract down or scales down so when it hits that this point it's at one point - and then it scales down - back to one and that's it so I mean it's pretty simple and I think this is a nice project because it just shows you how to you know work with both JavaScript and CSS and create some cool animation effect all right so that's it guys hopefully you enjoyed this if you already took this in the udemy course hopefully this maybe shed some more light on it if you didn't fully understand it because I did explain it in a different way but that's it guys thanks for watching and I'll see you next time

Channel: Traversy Media

Views: 83,857

Keywords: javascript, css, css animation, javascript animation

Id: l-1ZrU6avzI

Length: 22min 43sec (1363 seconds)

Published: Sun Jun 07 2020