Creating Page Transition Animations EASILY with Swup

Key Takeaways

today you're going to learn how to create page transition animations with swap j/s oh and hey I'd like to point out this videos awesome sponsor skill share calm which offers thousands of classes in design coding business and more for instance you're about to watch my UI tutorial but you could watch this full UI UX course on Skillshare now skill share is just ten bucks a month but if you're the first 200 students to use my very exclusive link below in the description here in YouTube then you get the first two months free alright so let's get started everyone Gary Simon of course Etro so today we're gonna take a look at something called swap which is a page transition animation library and if you have a really simple project that doesn't need all the bells and whistles associated with something like view or react or angular then and you do definitely do want page transition animations then this is a great resource to be able to use so showing you the example again there's actually three different animations taking place here if I show you will see that this section here fades up and out and also the button it also fades to the it moves over to the left so let me just show you again so swap will allow you to add multiple animations to your different UI elements which is very handy and coming up here this is the github page for it where you can check it out and learn more there's also if you want to do animation based on JavaScript because what by default here is in CSS there is swap jas as well and this can even be used i with g sapping animations as well alright so there's a lot here we're not going to cover all of it but I will definitely help you get up and running and understanding most of it alright so for today's question what is your one goal going forward in 2019 now we're almost there so answer I in the YouTube comments I'll put my answer there in the top pink comment make sure you subscribe and let's get started alright so here we are at the github page for swap and it's going to provide you with a lot of different information the part that we're going to concern yourself with initially here is just installation and we could see that there is a CDN for it but I'm just gonna use this real quick to install it so I have a blank folder here called swap in my code folder and we're gonna go ahead and we'll go to view and terminal and we'll just down here real quickly do that real quickly and then we're also create an index dot HTML all right and let's refresh this there we go we have our node modules with our swap right there so we'll just reference this real quickly in the JavaScript so right here on our index.html put I'm using Visual Studio code by the way free code editor by Microsoft hit exclamation point to get some boilerplate and then we'll get our CSS linked up here real quickly in main and then no CSS I always do that main CSS will create that real quickly as well so we'll do CSS if you watch my channel regularly this is the drill when I'm dealing with just with a basic prop you know if it van Ellijay s based project not use any frameworks I'm gonna use sass here and you're gonna need the sass eye compiler here for it's an extension for visual studio code you can just google that and install it so now it's watching our sass file and it compiles it down to CSS what else here and okay let's just go ahead and get started by will do the HTML first the CSS and then the actual implementation of swap j/s first we'll get all that stuff out of the way so I to get started we're just gonna have a very minimal I'm it's only a few lines of HTML really we're just gonna have just to fill it out and make it sort of the appearance of a web page with a kanaev bar we'll put in an a actually before we do that we'll put a containing element just to bring it in i the the the whole website in terms of width so we'll just have a div of a class container all right and then we're gonna have a nav oh no we're not gonna have an unordered list I'm not gonna bother really with putting a fake navigation in we will have just a an a element going nowhere just for like a company logo or something and then after that we'll have a main with an ID of swap and then a class of transition - fade so you'll see I the the ID here is important in as well as the the the class and you'll see how it's important once we get to that section so let's put it in h1 will put it'll say homepage here we'll put in a p with lorem ipsum text and then also underneath it will put in a call to action so a href is going to go to a sub page dot HTML and then um we'll leave that blank now we're going to add a class to it later but you'll see in a second go to the other page and that is it for now we will also have another HTML element just to demonstrate another transition but for now that's good so right here we're gonna put a script alright source and right now we're just gonna link it directly from the node modules folder and then we're gonna put in swap dist and swap Minjae s alright and then we're gonna put in a script and we're just gonna do whirring inline vanilla JavaScript right here and the only thing that you need to do i which is in the documentation just to get it set up with the all the default options is just to put const what is new swap right here alright so at this point let's go ahead and head over to the CSS or the sass pate the file and i'm just gonna paste in some basic roll sets just to get started so for instance we have a body with a font family of montserrat that's installed on my sheet oisin so I don't have to import it and then I we're also doing just a text-decoration:none on the links and then the container we're centering it and putting it with eighty percent also our nav again very simple stuff nothing too exciting happening here also we'll have our main element so we're setting our width to 80 percent on the main element just to bring things in further margin 5e m Auto and then just styling up our call to action button right here and that's pretty much all the basic CSS is associated with this so if I bring back the sidebar with control B right click and go to open with live server this is another extension this is what it should look like and of course we don't have a sub page dot HTML so let's go ahead and create that so I'm going to create sub page @ HTML all right I'm going to copy all this stuff here and paste it in we don't need the script source or the include here at all so right here the only thing I'm going to change of course in a real project you would have templating and all that stuff to avoid being redundant but um just just for a quick demo so a home page here this will be the sub page home page here and yeah I think we're pretty much good to go just for the sub page you can see we're only changing just you know the fact that I just so we could see it visually changing pages we'll see the as well in the URL and the browser that will update to sub page dot HTML as well so just keep note of that and we'll see it momentarily so now if we go and we click here to sub page okay we're at sub page go to the home page oops we got to update this to index in the sub page area there we go there we go so now we go back here now it just goes back and forth subpage goes there index goes to subpage this is say homepage here what am i doing sub page is there this is the sub page alright this is home page and it's going to so page now if it's if it's acting strange I'm wondering there we go yeah I think this is simply because we've included the script but we haven't yet done the proper transitions because it's not updating this content I so let's go ahead and define the most basic element in and then basically when you're using swap jsut define the animations through your CSS alright so I will get started and we'll see notice as I mentioned before these CSS classes are based on the prefix with when when it comes to using swap j/s of transit transition - and then whatever you want to call it custom animation and then this will allow you to add multiple different animations to multiple elements if you want to alright so our first one is transition - fade alright so we're gonna come down here I'm going to define that alright and we're gonna put in just a transition property of 0.4 seconds an opacity of 1 all right so this is kind of the the the original state and then we're going to put in HTML dot is - animating transition - fade and then in there we put a pass 'ti 0 and then we can also do multiple other animations but we're just gonna leave it there for now so now if i refresh we just click go to homepage and go to other page it's going to start working and so now we have a very very simple I page transition animation between the content that included inside of the swap ID and of course like I mentioned you can also do multiple animations here so if we wanted to come up from the from the top and go in and out we could do a transform translate why 100 pixels or so and it takes a couple times just to get all refreshed and there we go and of course you can make this go from left to right or right to left using all the various animation properties so what if we wanted to have a second type of animation perhaps placed on the button where it does something different while being animated itself well very simple we can go to our index we're gonna put in a class in our button called rule state transition - which is the prefix we need to add so we'll put class equals transition - and I will say what would we call this we'll call this left and then we'll go - we're gonna close out sub page and then we can go to main I'm just gonna copy this and call this one left and this left as well and then we can define IR any type of animation that we want to apply to that so we could do like eye let's see here instead of a pasady based we can do let's see transform and we'll say translate x0 and then over here we'll do translate X at a negative hundred pixels so instead of Y it's gonna be X so it should be sliding in from the left so we could see what happens when we also apply that to the subpage the class so if you take this and copy this real quick and go to subpage place it there as well we'll see what happens very cool so as you can see we can apply multiple animations and they all work in conjunction with each other and notice you know the URL is changing up here and it should be SEO friendly as well so very cool very smooth let's try adding another sort of one of those splash based animation torrent page changes and animations where you know it's maybe it's a slider type thing that kind of just consumes the page and then goes back quickly out once the new page has been transitioned in in terms of the content so we'll add in in our index.html let's see here well add in just I think right here Yeah right after main we'll put in a div with a class - and we'll call this one wipe and we're also going to give it a class that we can style as well in CSS so we're gonna go back there into the CSS first and we're gonna put in let's put it up here overlay alright and so we have a number of different properties that are going to specify we want this to be something that just overlaps everything so we're gonna put position:absolute alright and also the width will be a hundred percent a hundred percent as well as a background of red and then also a left of zero top zero because we're using position:absolute and then we're going to put transform scale zero so we're not going to see it initially and then transform origin will be left so it will start from the left when it's animating if I take this off that property moments here Lee and we go to our home page we'll see nothing exists because I we haven't scaled it so now it goes away we can use everything as is alright so now we can create that animation for the swipe the transition swipe so coming down here we'll put in transition wipe rather I was saying swipe will put transition 0.7 seconds I'm gonna use a custom easing from acute the cubic Bezier property and if you go to google and type cubic Bezier generator or whatever you'll see how you can get these values based on how you want the animation in terms of time to play out and then also transform scale we're gonna do we're gonna scale it on the x-axis alright and we'll set that to zero and then the final one here hTML is animating and of course is animating is added to the dom by swap while it's actually animating so that we can apply specific CSS properties specifically to transitions wipe when we want it to animate so transition wipe right there and then we'll put it in transform scale x1 alright and there we go so we can see they all work in conjunction with each other we can see that these is fading up this is going left while this other big sort of splash based animation is too occurring I probably wouldn't use exactly this but this is just a demonstration just to show you some of the options and and how you can multiple you can animate multiple elements using swap j/s for your very simple projects alright so hopefully you found that useful make sure you answer today's question which is what is your one goal going forward in 2019 alright guys I'll see you soon make sure you subscribe and see you later [Music] [Music]