Up next in 10
Build Amazing Page Transitions In Only 12 Minutes
2K views
Feb 7, 2024
In this insightful and concise 12-minute video tutorial, viewers are guided through the process of creating stunning page transitions that will elevate the overall user experience of their websites. The tutorial offers a step-by-step walkthrough, breaking down the key elements and techniques required to build these captivating transitions. From coding tips to design considerations, the video provides valuable insights that cater to both beginners and experienced web developers. Whether you're looking to enhance the visual appeal of your website or simply interested in mastering the art of seamless page transitions, this tutorial promises to deliver quick and effective solutions in just 12 minutes. Get ready to transform your web pages and captivate your audience with these amazing page transition effects.
View Video Transcript
0:00
You know what looks cool
0:02
Page transitions. That smooth animation that you get when you go from one page to another page that you almost
0:07
never see on websites. It really adds that extra little polish that makes a website go from good to amazing
0:13
So today, in this video, I'm going to show you how to really, really easily implement page transitions in your own website
0:19
Let's get started now. As always, on the left, I have Visual Studio code open to a completely blank project folder
0:28
and on the right, I actually had the document. right, I actually had the documentation for the library we're going to be using for these page
0:32
transitions. And the first thing we need to do is actually download this library we're going
0:36
to use. There's two main ways you can do it. The first way is actually using NPM to install it
0:41
and the second way is to just include the script file from a CDN, such as Unpackaged.com
0:47
and the link is right here on the website. I'm going to show you how to do the MPM way. So the
0:50
first thing you need is Node. So you can check if you have Node installed by going Node-V
0:54
and you should see your node version if you have it installed. If not, I'll link a video on how
0:58
to install node in the cards and the description. The next thing you need to do is just run NPM, I, SWUP, and that's going to install this
1:07
SWEP library into a Node Modules folder, which we're going to see on the left hand side here
1:12
There we go, we have node modules, and in here we have that library, and inside the distribution
1:16
folder we have SWAP.min.js, and this is the code that we want to include inside of
1:21
our index.h.m. So let's minimize all this out and create that index. HTML
1:26
We can just come in here, type in index. .tml. And if you're in Visual Studio code, you can just type exclamation point, hit enter, and
1:33
it's going to build out your boilerplate HTML for you. And we could just put here our title is home
1:38
The next thing we need to do is include that script tag, and you can copy it right here from
1:42
the documentation, which I have linked in the description, or you can include it from node
1:46
modules, so we can just include the script tag. We want the source here to be equal to node modules, and then inside of there we have
1:52
our swap library, and inside of that we have the distribution folder, and we want to
1:55
want the minified version because that'll be the smallest possible file that we can import into our
1:59
project. And then since we're including this in the head, make sure you put defer so it actually
2:03
loads after your HTML is done loading. Now that we have that done, the next thing we want to do
2:08
is just to create some really, really basic HTML so we can test out the page transitions. This
2:13
isn't going to be beautiful, but it's going to work just fine. The first thing we're going to want is some kind of navigation. We're just going to do an unordered list, and each one of these
2:20
is going to have a list item with an anchor tag, and that anchor tag is going to be all of our
2:24
navigation. So the first one, we're going to have index.html. And something that's really important
2:29
about this library is you need to make sure you put the forward slash in front of the URLs that
2:33
you're using for within your page that you want to have the animations for. So it's really important
2:37
to make sure you have that forward slash in here at the very beginning of your URL for your index
2:41
For HTML page, for example. And here we're going to have home. I'm going to copy this down
2:45
two more times because we're going to have a pricing page, which is just going to say pricing
2:50
And lastly, we're going to have an about page. And this about page in here is just going to
2:54
about Now after that we actually going to have our section which we going to be animating in and out because our nav is the same on every page we don want that to animate in and out but we do want our main section down here to animate in and out
3:06
So in order to make it animate, what we need to do is put an ID here, and we want that ID to be Swap
3:11
We can actually change this later on if we need to inside of the JavaScript, but we're
3:14
just going to leave it at the default of Swap, so make sure you put that as your ID
3:18
The next thing that we want to have on here is our class, which is going to define our animation
3:22
This library allows you to use CSS animations or JavaScript animations if you want, but for this tutorial, we'll use CSS animations because it's easier, and CSS
3:29
animations are really quite powerful, in my opinion. So here, you want to put a class and it has to start with transition
3:36
And again, this is something that you can change in the configuration in the JavaScript if you want, but we're going to keep it at the default
3:41
So it must start with transition, hyphen, and then we can just put whatever name we want
3:45
For example, this is going to be a fade animation, so we're going to call it transition fade
3:50
Now inside of the main, we're just going to put our content, which in our case, we're just going to put an H1, and this is just going to say this is
3:55
the home page just like that so now we have all of our HTML done for our home page
4:00
let's save that and if we have Visual Studio code and the live server extension
4:05
installed we can right click this and open it with live server and that should pop up over here and as you can see we have our home page our pricing page which
4:12
doesn't exist yet and our about page also does not exist yet so let's create those
4:16
two pages we can just copy here index.html paste it down two times the first one we
4:21
want to call pricing make sure that's spelled right there we go
4:25
And this one, we want to call about. And we only need to change a few things in each of these files
4:30
In the about, we just want to change here our title to about, and we want to make sure we change this to say that this is the about page
4:36
Then instead of pricing, same exact thing, change the title to pricing, and down here change this to the pricing page
4:42
Now we can check our links, and we can see that the homepage works, pricing page works, and the about page works
4:48
So our entire application right now works, but we don't have any of those smooth transitions
4:51
It's just a really rough transition. So what we need to do is write the JavaScript we need to hook up this swap library with our application
4:58
and this is actually incredibly easy. Let's create a file. We'll just call it script.js, and we only need one line in here
5:05
And that single line we need to write is just create a variable called swap
5:08
and we want to set that equal to a new swap, and just make sure this is a capital S here because we're actually calling the new class
5:15
And if we save that, that's all the JavaScript we need to write for this entire application, which is really powerful
5:20
The next thing we need to do is make sure we include that script tag, So we can come in here, create a script tag
5:24
Make sure it's after your import of the node module's swap library. Make sure we put the defer keyword on it, and we can set the source here to our script.js
5:33
We just want to make sure we include this on all of our different HTML files, so it's include this in our About here as well
5:39
Let'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 going to notice things aren't going to work
5:47
If we click on pricing, for example, it doesn't actually navigate us. About doesn't actually navigate us
5:52
You see our URL is changing, but our actual content is staying exactly the same
5:55
And that 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 create a style sheet So we can just come in here we just call this styles
6:07
And before we actually write this, let's make sure we include it into all of our different pages
6:11
By just using a link tag here, we want to set the h-rev here equal to styles.casss
6:16
And we want to make sure we set the rel, and this just needs to equal style sheet. So our browser knows this is a style sheet and not something else
6:22
Let's copy this to all of our different pages in the head, so our about, So our about and our pricing, and now we have our style sheet linked to all of our index pages
6:30
Now in order to get started with the CSS animations, inside of here, we need to select that class
6:34
we created, which is called transition, and this one is just fade
6:37
And what we need to do here in this transition fade class is define what we want our
6:41
content to look like after it fades in. So in our case, we want to set an opacity to one whenever our content fades in
6:48
And in order to make a transition for your animation, you need to tell it how long you want
6:52
it to take. We'll use 500 milliseconds, which is long enough that it'll be easy for us to see for the tutorial
6:58
The next thing we need to do is that this library is actually going to add classes to the HTML
7:03
tag of our document every single time that it animates something in and out
7:07
And you can see those classes by going into the documentation, and all we need to do here
7:11
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
7:17
it's going to add classes of is animating, is changing, is leaving, is rendering, and a two class
7:22
But the main one we need to focus on is is animating, because it's going to add this class
7:26
to our content when it's animating. So what we need to do is it to our HTML, and we want to check when our HTML is animating
7:33
Whoops, make sure I spell that properly, and we only want to select our transition fade class
7:38
And what we want to do here is say what we want our content to look like when it leaves the page
7:43
So in our case, we want to have an opacity of zero. Now if we save that, and actually check out our content, when we click on home, you can see our
7:49
content fades away, and our new content fades in. in. And the reason this works is because the is animating property is being added to our
7:56
HTML. So what's happening is right now we're at Opacity 1 and our content is transitioning
8:01
over to Epacity 0. And when our new content enters the page, it does not have this
8:06
is animating class. So what happens is it's going back to our opacity of 1 because it's
8:11
no longer animating. And that's how it animates back in with the opacity of 1. And the power
8:16
here is that you can really do whatever you want with these animations. For example, if you want to
8:20
make your animation different when the content leaves the page versus when it enters the page
8:24
you can do that by using over here the is leaving keyword on your HTML
8:29
For example, if we want our content to come in from the left side of the screen, what we
8:33
need to do is come up here and in our default value, we need to set a transform for our
8:37
Translate X and we just want to set this to zero. So by default, our content won't be moved anywhere
8:43
But down here, what we can do is create HTML. This is going to be for what happens when our transition is leaving
8:50
and we want to do the exact same thing we're in here, opacity zero. So when our content leaves, it goes down to that opacity of zero
8:56
But when it animating so for example in this case when it entering what we want to do is we actually want the opacity to be one because we want it to always be shown but we want it to slide in from the left side
9:07
So to do that, we can just say that we want it to start with a Translate X of 100%
9:12
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 set the transform origin just like that to be left
9:20
it means that our text is going to have our origin on the left-hand side of it, just so it'll animate in a little bit better
9:25
Now if we save that and come over here and click on pricing, you'll see that it's actually sliding
9:30
out and sliding in, but we just want it to fade out and then slide in
9:34
And the reason for this is that down here in our leaving, we don't actually have a transform translate
9:38
What we need to do is come down here and set our translate to be zero, because we don't want
9:42
it to move when it's leaving. So now if we save that and click on home, you'll see that it fades out, and then the next
9:47
thing slides in from the side. So by using a combination of is leaving and is animating, you can actually make different
9:53
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
10:02
So if we go back to our index here, let's just add something else inside of here. For example, we'll just add a button, and we're going to make sure we give it the class, and it has to start with transition with a hyphen
10:12
and this one we're just going to call swipe. We'll enter that off, and we'll just say button
10:17
It's just going to be a generic button. And now if we go over into our styles, what we want to do is we want to select that
10:22
So we can just copy all of this code that we had here. and we want to do is select our swipe animation
10:27
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 opacity
10:32
We can remove all the different opacity, and we want to actually translate our Y. So by default, the translate Y will be zero
10:38
We can remove this transform origin as well. And here, when it's actually animating, we just want to translate Y all the way up to 100%
10:45
So it's going to slide down and slide off. We can remove the is leaving though as well because we just wanted to do the same thing every time
10:51
Make sure that this says swipe here. Whoops. Swipe. Just like that
10:56
And now when we click on pricing, you'll see that the button slides down and fades out
11:00
And when we go back to our home, it's going to slide in and fade in. To make it even more apparent, let's actually change our Y here to be 100 pixels
11:07
And now if we save that and click on home or pricing, you can see the button really drops down
11:11
And when we click back to home, you can see it really flies up. It's really powerful being able to change multiple different things
11:16
And all we have to do is make sure we add that transition, hyphen class, and it'll take care of all of the extra
11:21
code for us. You'll also notice that if we actually inspect our page here, make sure that
11:25
we just make this quite a bit bigger so it's easy to see. You'll see that inside of our main
11:29
we have that one single section. If we collapse us, you can see we have one single main
11:33
And when we click on pricing, it actually swaps out that exact main element and none of our
11:37
old code is left behind. So it actually removes all the old code and inputs all the new code
11:42
which is really useful. We don't have a bunch of dead code being shown on our page that we don't want there
11:46
It actually takes care of all the cleanup for us. And that's literally all there is to page transitions. I told you
11:51
it was going to be really easy. If you're interested in more of my videos where I simplify the web
11:55
make sure to check them out over here and also subscribe to my channel for more videos just like
11:59
this one. Thank you very much for watching and have a good day
#Programming
#Web Design & Development