Creating Sick Page Transitions with Barba.js & GSAP

today I'm going to be showing you how to do those really cool snazzy page transition animations with the help of Barba j/s everybody what's up Gary Simon here so today we're gonna be checking out something called Barba Jas and it helps you create badass fluid in smooth transitions between your website's pages alright so I actually covered something similar to this a while back called swap Jas I'll try to remember to link it but does it essentially the same thing I and just to give you an example I'm the type of things that you can do they have a showcase section on your site and so for instance here's a cool example this is a Mozilla dot design so you could just do cool sort of animations between your pages here's another one let's scroll down and click on one of these I you could do just an endless amount of things in terms of transitions and animation so also I will be showing you how to use and integrate gee sap which is the green sock animation platform to handle the animation portion of this so it basically it helps you create an SP a in a single page application with these sort of a easy to integrate animations also just as a file a note I write here the code that I produce is very much similar to the code examples featured at this URL I'm gonna link this in the description so thank you to Quran it was kind of hard for me to find up-to-date tutorials for this to figure out how to get it working alright so as always make sure to subscribe and let's get started before we begin there's never been a better time to trial a node from now until May 31st of 2020 the node is giving every single account access to object storage for free that's right whether you create an account all the way back in 2003 or even just today you can take advantage of free object storage until April 30th of 2020 what is object storage you might ask well object storage is an easy way to store and access data without the need for running a server it's perfect for data that doesn't regularly change like images and other multimedia files important backups or giant archives for service that might need more storage space one of the best use cases for object storage is hosting your own static website you have a site up and highly available on lenôtre object storage with as little as an HTML and CSS file to give object storage to try for free and get an additional $20 on your noodle enode account sign up at lynda.com forward slash design course alright so the first thing we're gonna do in order for this to work our the body tag has to have a data - Barbour equals wrapper around it now just to preface this real quickly I just have a boilerplate HTML here in Visual Studio code I have a main sass file that I am not watching yet there we go so you have to get the live sass compiler plug-in over here in the plugins section I'm also going to be right-clicking opening with live server and all right there that is and we're good to go okay so yeah nothing fancy happening here now what I'm gonna do initially is just get our HTML defined there's not much of it so we're gonna have a just an overall div class wrapper if this isn't specific to Barba or anything I'm just choosing to have a wrapper around everything we're gonna have a header so all this stuff right that we're doing right now the navigation is gonna be outside of the main area where all the content is dynamically placed by barba so we're just gonna specify a very simple navigation here we go and this is gonna say home we will shift alt down and this will just say services and this will go to services dot HTML okay and that's all we have for our header so we're gonna go into after header we're gonna come down and this part is specific to bar but basically we're gonna put things in a main element data - Barbour Barba not Barbour container alright and then data - Barba I have a namespace so each page will have its own unique namespace so this is the home page we're going to name it home alright and then we're gonna do div class left here h1 we're gonna say an ongoing experience I don't know I just came up with a stupid sort of headline and then we're gonna do in a href this is gonna go to services HTML as well and we're gonna give it a class of CTA and a call to action to take me there if I can type alright we'll also have just an image source this is going to go to photo jpg' alt it's like a photo of like an interior we have two of them here's one and then here's the other all right after that is nothing else that's our very simple page so you know of course if we save this it's gonna look like garbage because we haven't done the HTML but we need to get our script source in here their various JavaScript files here so just down here we're going to import through a CDN the Barba core which you can use NPM as well as yarn to install if you want a more robust setup we're also gonna get in G SAP alright so if you're unfamiliar with G SAP which is an acronym for green sake animation platform I've already done a tutorial on green sock IRD sap 3.0 at least and you can learn more about that and then finally we will link up a non-existent index dot j s4 which we will create not right now right there alright so let's get the CSS out of the way I mean in order for us to understand exactly what's happening just real quickly you're gonna go over a CSS some of it I'm just gonna copy and paste in like the HTML body property we're gonna have the body property itself with the font family of monster I already have it installed in my system I'm not gonna bother importing it at the top it's not too pertinent to this tutorial height 100 viewport height in just a real light gray background color okay our wrapper is going to have just some padding:1em unit you know we are going to I let me move things over we are just going to I don't know why I bothered but I decided to do like a mobile-first approach here just to show you that this does work on mobile of course and so now we're also gonna have our ul element I'm gonna paste Annie's list-style:none that's all that does nothing exciting going on up there and then we will also have all the links so we're just saying tech steak or a decoration none color black our list items at the top specifically we're just moving them over a little bit I'm not doing anything fancy at all no hamburger menus right now our h1 element increasing the size there of our call to action class all right that's all that's doing nothing fancy right there our image image is gonna disappear because I'm using a clip path polygon and so basically what that does is it hides it because if we're going to animate the clip path using G SAP if that makes sense if I take this out this is what it'll look like quite a fault you know very very simple stuff we'll add that back also rul transition all right so our unordered list of transitions so what this is is oh I haven't added that yet let's get there so I'm going to create here I'm just gonna paste this in this unordered list transition and basically this is you can come up with any number of ways to create some type of overlay animation effect if you want to something like that that happens when you click on to another page so like something will cover the page and then reveal so this is just five empty list items and at my thought my idea was to have them like each one kind of through a sequence or stagger animation come up and then come back down whatever so now if I save that and we go back to our main sass you couldn't go ahead and paste this next to rule sets in alright so what we're doing is we're taking each one of these to display flex it's a position:absolute display flex by the way we'll take those five elements and you know situate them right to the to the right of each other see index needs to be high height is 100 viewport height with 100 of the UL element top-left margins your pointer events none to make sure that I we can click to these areas because it's going to be sitting on top and then you I'll transition Ally we have a transform of scale why to take it vertically all the way down and backgrounds white and then just the width I had to put the width to 20% to get that to work right now we can't see anything though but this is pretty much it I decided to also add in a media query for desktop and larger I'm not large in the desktop but a larger viewport width so I'm just going to paste that in so we have a at minimum with 650 pixels we're just taking the main element and we just play flex it which is going to create a two column layout margin top position relative because we do have an element that the call-to-action I put as a position:absolute let's just save this and this is what we have so far again we can't see the image right here so nothing you know that's specific to the purpose of this tutorial is happening here so now what we're gonna do is focus on the actual j/s which is why you're even here alright so I again I got this I this this basic code set up from the individual I mentioned at the beginning of the video and we're gonna start first just with the barbra in it to initialize it and so we're gonna say Barbra got an it and we're going to open that up and we have an object here we're gonna set sync to true so that means if this is going to be set to work asynchronously its true and then you can also set up to work synchronously as well let me get out here we are this right here so you can see that I let me do a search here for sync so hooks can either be run synchronous Inc rinna Slee or asynchronously so we're using the async pattern here and of course you're gonna have a lot more information if you just look at the the documentation these right here these hooks they give you a lot of options if for applying animations and when to apply them so we're just gonna use a couple of these such as I enter and I believe one other once as well and leave all right so it allows you to create like leave animations I and once they enter and all that good stuff also we're gonna have a transitions array of objects all right so transitions in an object we're going to say async leave oh that's not what we wanted there we go and then inside of here okay a constant of done and this a sync so if you aren't familiar with asynchronous code there's a lot of tutorials out there page transition we haven't defined that yet we also haven't define a delay function which is also gathered from that tutorial that I checked out I it's why does it keep on doing it that's very annoying it's delay Christ okay so for that delay function we're just gonna copy that and just put it up here as a function alright and then I page transition that is not supposed to be page transition event you know it's never done that to me before that's a pain in the ass alright so page transition alright so this is gonna get called and this is where we're going to define our RG cept animations alright so function page transition up here we're going to create a new timeline of green sock animation platform so G SAP timeline and again I have several videos on on G SAP alone that you might want to check out and then we say TL to I in for our case I'm going to be hi this is this is basically the the area where the five list items come up and then height from the page alright so that's a UL transition Li selector that we're going to specify there so you l dot transition and specifying these list items that's what we want to animate so then we're gonna go ahead and put in our properties to animate maybe we hit control B to get rid of that sidebar there we go so we're gonna have a duration here of 0.5 also a scale Y of 1 transform origin is going to be bottom and left if you leave if you omit transform origin it's going to come from the center and it looks kind of weird because it'll scale from the center of the page Ivor CLE I didn't want that stagger here is also going to be just point to now stagger that means I if there's multiple selectors like multiple list items in this case I won't animate them all at the same time it's going to animate them with this stagger offset so it does point to it'll do the first one and then point to seconds it'll do the next one and then so on so forth so it'll do that five times and then also if we we also need to take this and we have to reference it one more time in order to hide it all right so that brings it up the first one the second one is going to go ahead scale Y zero same thing with the transform origin stuff and we can also put a I a stagger along with a couple other properties this is we're gonna make it kind of go out faster so this is when it comes down to reveal the next page the intended page will do delay I point one so we're just gonna have a very slight delay there all right and that looks good all right and then we also have two other quick functions we're almost done by the way they sink enter so that's one of the hooks that we can tie into and we could say and what am I doing here we've got to put a comma there we go and this is where we can call another function where we can have a something called content animation whatever we want to name it it did that again are you kidding me there we go all right ASIC enter this is gonna be once alright so again just refer to the documentation here again I we have once right here current page the once transition I believe that's in reference to when the page loads up it'll animate based on this so we're just calling the same function for enter and once all right obviously you can change this up to any number of different animations all right so all right that looks pretty good right here now of course we need to create a second page alright so the second page normally you'd want to use some type of a templating system but we're not going to do that for this simple tutorial we're gonna do an index I don't know we're gonna do a services dot HTML I'm just gonna paste this all in and just change a couple things up all right so this is I let's see here I'm gonna change this here let me look at my reference monitor real fast to make sure I'm putting everything in correctly this is going to be let's see explore our services I just want to change a couple things up just to make sure that take me home we can say and then we'll say index dot HTML all right that looks pretty good oh and also one other thing I forgot we have to create the content animation function so in here this is where we can say for instance if we know that you know the index in HTML to have a div class left or they have any other similar HTML attributes we can go ahead and animate those as we wish so if I could talk we'll go back to her here and we'll use time line again so G zap time line and we're gonna say TL from we'll take our Left column which has our h1 element and such and the call to action most a duration is gonna be 1.5 translate Y will be 50 so it'll come from the bottom and what else opacity 0 and then we'll also take our image this is where we're going to animate the clip path property and we're gonna say - I'll say image the duration here is going to be nothing's gonna be default duration and we're gonna say clip path and I'm gonna paste the next part in just because it's kind of lengthy there we go now you probably wondering where I got this from I just went to google and type in clip path generator and the one the clip path property that's currently set on the image selector in a CSS was basically a rectangle where it's completely flat so you can't see it that's why we can't see it currently in the CSS this one is with the rectangle opened all the way up so it's going to animate to this clip path right here alright so now there we go ok so that's yeah that's it so let's check this out all rights go back to home here all right very cool now this i/o you see this is this right here this graphic it takes too long and that's because I forgot to put an offset right here so we can do an offset at the very end so we put in negative eeeek and then 1.1 seconds so now it's gonna come in kind of a little bit after this one starts look at that very very very very very cool stuff all right everybody hopefully you enjoyed that let me know what you think if there's a and maybe a similar library that you know you want me to check out or if you produce something with it leave a comment and I will check it out as well perhaps alright so as always make sure to subscribe and I'll see you guys soon goodbye

Channel: DesignCourse

Views: 95,154

Keywords: barba, barbajs, barba.js., barba js tutorial, page transition animations, page transition css, page transition animations tutorial, page transition css tutorial, animation tutorial, greensock, gsap, gsap tutorial, barba gsap, swup, swup js

Id: aMucZErEdZg

Length: 20min 5sec (1205 seconds)

Published: Tue Mar 10 2020