Page transitions, that smooth animation that you get when you go from one page to another page that you almost never see on websites.

It really adds that extra little polish that makes a website go from good to amazing.

So today, in this video, I'm gonna show you how to really, really easily implement page transitions in your own website, which get started now, as always, on the left, I have visual studio code open to a completely blank project folder and on the right, I actually the documentation for the library we're gonna be using for these page transitions.

And the first thing we need to do is actually download this library we're gonna use.

There's two main ways you can do it.

The first way is actually using NPM to install it.

And the second way is to just include the script file from a CD in such a unpackaged dot com.

And the link is right here on the website.

I'm gonna show you how to do the m P m way.

So the first thing you need is note so you can check if you have knowed installed by going no Dash V and you should see your node version if you have it installed.

If not, I'll link a video on how to install note in the cards and the description.

The next thing you need to do is just run and P m I s W u P.

And that's going to install this swept library into a node Modules folder, which we're going to see on the left hand side.

Here.

There we go.

We have knowed modules, and in here we have that library and inside the distribution fold folder, we have swept dot minn dot Js.

And this is the code that we want to include inside of our index dot html for our application.

So let's minimize all this out and create that index dot html.

You just come in here a type in index dot html and if you're in visual studio code, you can just type exclamation point hit, enter, and it's going to build out your boy or plain HTML for you.

And we could just put here our title is home.

The next thing we need to do is include that script tag, and you can copy it right here from the documentation which I have link in the description, or you can include it from node modules so we can just include the script tag.

We want the source here to be equal to note modules and then inside of there we have our swept library.

And inside of that, we have the distribution folder and we want the men ified version because that'll be the smallest possible file that we can import into our project.

And then since we're including this in the head, make sure you put the first so actually loads after your HTML was done loading.

Now that we have that done, the next thing we want to do is just to create some really, really basic HTML.

So we contest up Paige Transitions.

This isn't gonna be beautiful, but it's going to work just fine.

The first thing we're gonna want is some kind of navigation.

We're just gonna do a nun ordered list, and each one of these is gonna have a list item with an anchor tag.

And that anchor tag is going to be all of our navigation.

So the 1st 1 we're gonna have index dot html and something that's really important about this library is you need to make sure you put the Ford Slash in front of the girls that you're using for within your page that you want to have the animations for.

So it's really important to make sure you have that ford slash in here at the very beginning of your euro for your index dot html page, for example.

And here we're gonna have home when a cop is down two more times because we're gonna have a pricing page, which is just going to say pricing.

And lastly, we're gonna have an about Paige.

And this about page in here is just going to say about now.

After that, we're actually going to have our section which we're going to be animating in and out because our knave is the same one every page.

We don't want that to animate in now.

But we do want our main section down here to animate in and out.

So in order to make it animate, what we need to do is put an i d here and we want that I d to be swept.

We can actually change this later on if we need to inside of the Java script, but we're gonna leave it at the default of swamp, so make sure you put that as your i d.

The next thing that we want to have on here is our class, which is going to define our animation.

This library allows you to use CSS animations or JavaScript animations if you want.

But for this tutorial will u CSS animations because it's easier.

And CSS animations are really quite powerful, in my opinion.

So here you want to put a class and it has to start with transition.

And again, this is something that you can change in the configuration in the Java script.

If you want what we're gonna keep it the default.

So it must start with transition hyphen.

And then we can just put whatever name you want.

For example, this is going to be a fade animation.

So we're gonna call it transition Fade now, inside of the main, we're just gonna put our content, which in our case, where you gonna put in a tch one and this is just going to say this is the home page just like that.

So now we have all over each team well done for our home page.

Let's save that.

And if we have visual studio code and the Life server extension installed, we can right click this and open it with Life Server, and that should pop up over here.

And as you can see, we have our home page.

Our pricing page, which doesn't exist yet and are about Paige, would also does not exist yet.

So let's create those two pages.

We could just copy here index dot html pasted down two times the 1st 1 we want to call pricing mixture is spelled right.

Here we go and this one we want to call about and we only need to change a few things in each of these files in the about.

We just want to change here are titled Toe About, and we want to make sure we change this to say that this is the about Paige.

Then, instead of pricing, same exact thing changed the title to pricing and down here, change this to the pricing page.

Now we can check our links, and we can see the home page works, pricing page works and the about Paige works, so our entire application right now works, but we don't have any of those smooth transitions.

It's just a really rough transition.

So we need to do is write the Java script.

We need to hook up this swept library with our application, and this is actually incredibly easy.

What's creative file?

We'll just call it script dot Js and we only need one line in here.

And then single line we need to write is just create a variable called SWAC, and we want to set that equal to a new swept.

And just make sure this is a capitalist here because we're actually calling the new class.

And if we say that, that's all the Java script we need to write for this entire application, which is really powerful.

Thanks.

Thing we need to do is make sure we include that script tag so we can come in here Credit script tag.

Make sure it's after your import of the node modules swept library.

Make sure we put the differ keyword on it and we could set the source here to our script at J s.

And we just want to make sure we include this on all of our different html files.

So it's include this in art about here is well, it's just copy this in.

And lastly, of course, our pricing.

So now we have this included in all of our different HTML pages.

And now, if we go over to our application, you're gonna notice things aren't gonna work.

If we click on pricing, for example, it doesn't actually navigate us about Doesn't action navigate us, you see, are you're always changing.

What are actual content is staying exactly the same.

And that's because we need to implement the CSS animation to animate our content out and to animate our new content in.

So to do that, let's create a style sheet so we could just come in here.

We just call.

This style is about CSS, and before we actually write this, let's make sure we include it into all of our different pages by just using a link tag here.

We want to set the atria of here equal to stiles dot CSS, and we want to make sure we set the rail, and this just needs to equal style sheet.

So our browser knows this is a style sheet and not something else was copy this to all of our different pages in the head.

So are about and our pricing.

And now we have our style sheet linked all over.

Index page is now in order to get started with CSS animations inside of here, we need to select that class we created, which is called Transition.

And this one is just fade.

We need to do here in this transition fade classes defined what we want are content to look like after it fades in.

So in our case, we want to set capacity toe one whenever our content face in.

And in order to make a transition for your animation, you need to tell it how long you wanted to take in Our case will use 500 milliseconds, which is long enough That will be easy for us to see for the tutorial.

The next thing we need to do is that this library is actually going to add classes to the HTML tag of our document every single time that it animates something in and out.

And you can see those classes by going into the documentation.

And all we need to do here is click on the how it works section.

And as you can see, if I zoom this in so it's a little bit larger text.

You can see that it's going to add classes.

Is animating is changing?

Is leaving is rendering and a two class.

But the main one we need to focus on is his animating because it's going to add this class toe are content when its animating.

So what we need to d'oh is going to add it to our HTML and we want to check one, or HTML is animating what's to make sure I spell that properly.

And we only want to select our transition Fade a class and we want to do here is say what we want are content to look like when it leaves the page.

So in our case, we want to have a nope, a city of zero.

Now if we say that and actually check out our content when we click on home, you can see our content fades away on our new content fades in, and the reason this works is because this is animating property is being added to our HTML.

So what's happening is right now we're at opacity.

One and our content is transitioning over to a pay city zero.

And when our new content enters the page, it does not have.

This is animating class.

So what happens is it's going back to our pasty of one because it's no longer animating.

And that's how it animates back in with the opacity of one.

And the power here is that you can really do whatever you want with these animations.

For example, if you want to make your animation different when the content leaves the page versus when it enters the page, you can do that by using over here he is leaving key word on your HTML.

For example, if we want our content to come in from the left side of the screen, what we need to do is come up here and in our default value.

We need to set a transform for our translate X, and we want to set this to zero, so by default, are content won't be moved anywhere but down here we can do is credited.

Each team l dot is leaving.

This is going to be for what happens when our transition is leaving, and we want to do the exact same thing we're in here.

Hope a city zero.

So when our content leaves, it goes down tow rope, a city of zero.

But when its animating.

So, for example, in this case, when it's entering, who we want to do is we actually want the pope a city to be one, because we wanted to always be shown we're gonna to slide in from the left hand side.

So to do that, we could just say that we wanted to start with a translate ex of 100%.

This is going to mean it's starting all the way on the right side of our screen.

And lastly, if we just come in here and said the transform origin just like that to be left, it means that our Texas going to have our origin on the left hand side of it just total animate in a little bit better.

Now, if we say that and come over here and click on pricing, you'll see that it's actually sliding out and sliding in.

But we just wanted to fade out and then slide in, and the reason for this is that down here and are leaving.

We don't actually have a transformed translate we need to do is come down here and said, Our translate to be zero because we don't want it to move when it's leaving.

So now if we say bet and click on home, you'll see that it fades out, and then the next thing slides in from the side.

So by using a combination of is leaving and is animating, you can actually make different enter and leave animations for your content.

Another really powerful thing we can do is actually animate multiple things inside of our page when we're entering and leaving different pages.

So we go back to her index here, pushes add something else inside of here, for example, which is at a button, and we're gonna make sure we give it the class, and it has to start the transition with a hyphen.

And this one, we're just gonna call Swipe.

We'll enter that often.

We'll just say button, just going to be a generic button.

And now if we go over to our styles, what we want to do is we want to select that so we can just copy all of this code that we had here and we want to do is select our swipe animation.

And what this one is going to do is just going to swipe up off the top of the page.

So we don't need to worry about up a city.

We can remove all the different up a city and we want actually translate.

Or why.

So by default to translate, why will be zero?

We can remove this transform origin as well.

And here, when it's actually animating, we just want to translate.

Why all the way up to 100%?

So it's gonna slide down and slide off.

We can remove is leaving, though as well, because we just wanted to do the same thing every time.