Build an Awwwards Project Gallery using NextJs, GSAP and Framer Motion

what's up everyone welcome back to the channel today we are taking a look at this amazing Awards winning project Gallery we're going to recreate that with nextges frame or motion and gsop let's get right into it now as always if you want to try out this animation for yourself there is a link to the live demo and there's also a link to the source code so this animation will be composed of three components first of all we're gonna have the page component which will be the parents of everything else it will have the data and the state then we'll have the project component which represents a single project that project will be able to set the state of the model and everything will be animated with CSS and then we'll have the modal component which will represent the dynamic model it will consume the state of the application and there will be an enter and exit animation with primer motion as well as a mouse move animation with gsop so here I've created the next application using npx Create next up using the latest flag and I've also deleted everything inside of the page chess the page module CSS and the global CSS just to start with a nice blank application now the first thing we want to work on here is the page component so here we have the basic structure of that component it's directly inside of the app folder which represents a page each project will have a title a source and a color now I have the four images that we are going to use for this project Gallery so I'm going to create an images folder inside of the public folder and grab the four images and slide them inside of it and now the data part of the page component is done we can move on to the state so here I've imported the use statehood from react and I've created the modal state so the model State here has two values one is it active initially it will be false and then which project is selected and initially it will be zero meaning it will be the first project the first project in the list will be the one selected and here I've created a body where all the projects will be contained in and I've mapped the projects returning a project component now that project opponent has the responsibility of setting the model and now we're done with the page components we can go in the source file here and create a components folder and inside of that folder we'll have the two components the modal component as well as the project component and so we're going to start with the project component here creating creating an index.jsx and a style.module CSS and then we can simply have like a simple component here and then we're going to import the project here from your components and now we have four projects that are returned here and here I've added some basic HTML and CSS to make everything look good and I've used the title that came from the parent and now if you want to make like a little animation here on hover if you look at the demo here you're going to see that the text is like getting pushed aside when hovering and the opacity is getting changed so to do that we can simply go on the project here and to hover we're going to do opacity like 0.4 now if you go on the demo here you can see the opacity is changing and then we can also do uh on the harder we're going to Target the H2 and we're also going to Target on however the P here and then we can simply do a transform and they translate like x minus 10 pixel and the H2 we can do translate 10 and then let's take a look at this and now they're getting like closer so it's actually the reverse minus 10 here and 10 pixel and now we can see the animation is working now obviously there's no transition so we can just do Transition all 0.2 seconds and we can do like linear and same thing for the H2 and the paragraphs and now we have a nice little animation on Hover now the last thing we want to do for the project component here is setting the state of the model so to do that we can simply add a on Mouse enter event here where we will set the model to active true and the index being the index of the current component and then I have an arrow here I need to add some brackets here and then we can also add a on Mount sleeve here when we hover out of the project we're going to set the model to active false and the index being the index of the project and then we can test that here and we see we have no error and we are now ready to move on to the modal component so I'm going to reduce the window here a little bit and then inside of the modal folder here we can create an index and a style module CSS and I'm going to create like a basic component here and then I'm going to import the model right here so the model here will have a couple of props one being the state of the modal and it will also need the data here of the projects and then we can close page.js and go inside of the modal component alright so here I've added some HTML and CSS for the modal component so I mapped the projects to return a model for every single one project and I add a background color associated with the project and inside of that I used a next image and then for the selling I make sure everything is centered with a certain width and a certain height and the position absolute to eventually be able to move it with the mouse alright so this is the result we have we have here a model for every single project we have and a background color associated with the color of the project and to make it look like the demo here to have like one big modal and the sliding thing what we can do here is add an overflow hidden on the model container and so the model container will have a height and a width that is fixed and an overflow hidden so everything else is hidden and then we can simply say that a single model should have a height of a hundred percent and then we can Center everything inside of it and we should have something like this and then what we can do here is simply change the value of the modal slider and do like a transform and then we can do like a Translate Y of like a hundred percent or minus a hundred percent and then like this we can travel from one project to the next but we are going to do that dynamically with JavaScript so for that we can go ahead and extract here if the modal is active and which one is active and then we can use the index here to basically change the styling and change the top properly to be something like the index multiplied by minus one 100 and this is going to be in percentage right so let's let's see if this works okay so nothing is working I believe we just need to put this guy here in position absolute and so the top properly will not work on it and as you can see here if we are hovering now the first project is the one selected at first with index 0 and then it does index 1 index 2 and index 3 Etc right and so now we are effectively changing which project is showed on the model and to have like a nice little transition we can go here on the easings and this here this cubic basic here is quite satisfying so I'm gonna use that here to do Transition the top property and I'm going to do 0.5 seconds and I'm also going to do cubic bezier and I'm going to take those values and let's let's try this out and now we have a nice little animation here and if we jump from one project to the next it still works really fine and really nice okay so now let's work on the enter and exit animation of the model so as you can see when I leave the body here the model exits and then when I hover a project it comes back in using like a scale animation now there are many ways to do that but personally I'd like to use frame erosion to do that so we can open the terminal here and do npm install oh I'm going to see the inside of the clients and do npm install frame or motion and then I can import motion here from frame motion here I create the scaling animation mentioning that the model should have a scale of 0 at first and then when it's active so when it's open it should have a scale of one and when it's closed a scale of zero and I also adjust the easing depending on if it's open or closed and then to hook that animation to our model what we can do here is add the motion at first here and that we can mention that the animation here should be the scale the scale animation and then we can also mention that initially it should have the initial value and then when should it be animated we can basically say that if active then we want to be open else we want to be closed right so we're using that value coming from the state if the modal is active then we're open and if it's not active then we are closed and then we can save this and let's try it out so at first here we're not seeing anything because initially the scale is not zero and when we hover the scale is at one and then we have our CSS animation here and then if we move out it's effectively working so we have a pretty nice animation here and for the final step here which is basically to be able to move the modal with the mouse we're going to use green sock so for that we can open a new terminal and do npm install which is up and then we can import Chase up from Chase up and then here I'm going to import the use effect Hook from react and so when the components Mount meaning when the modal mounts I'm going to create an effect here basically triggering a function in parameters I don't put anything here so that when it mounts it's going to trigger once and then what I want to do here is basically create two animations to be able to move the model one we can call it um let's call it what move container on the X and then we're gonna have a move container on the Y and so it's going to be equal to the quick to function of jsop and then here let's look at the parameters we need to have a Target and then we can mention which property we want to change and then we can have like a duration and the knees now we need to have basically a Target here and what we want to Target is the container here but there is no way of of targeting this for now so what we can do here is import the use ref hook and then we can have a container is equal to use ref which is going to be null at first and then I'm going to give that ref to the container and then what I can do here is Target the container and then mention that the property that I want to change is the left property and I can add a duration let's say of 0.8 with an easing of power 3. and then I'm going to do the same thing the same thing for the Y but I'm going to change the top position and then I can add an event listener on the window of mouse move which is going to trigger a function here with an event and then we can extract from that event the client X and the client y and then we can simply do move container with the client X and move container y with the client y here and then we can try this out see if it works okay so it seems to be working but there's definitely some weird things going on here and I believe here it's because we have conflicting hover we have a hover problem so if we look at the project here we are basically doing on Mouse enter we are setting the Moda active and on Mouse leave we are setting the model active to false and and because we are basically putting a model on front of in front of the mouse it's triggering it's triggering the mouse sleeve of the project and so what we can simply do here is for the model container we don't want any pointer events and that should solve the problem hopefully and nice now we are nicely being able to move the model around and we have the exit and enter animation here which is kind of looking good alright so the final step here is to add like here we have a cursor and we have a label for the cursor that says view so adding this will be the last step and we already have basically everything in place to do that we're gonna add a fragment here and inside the fragment is going to act like as a parent because here we're gonna have the we're going to scroll of it the cursor and then we're also going to have the cursor label and then the cursor label here will have the um we said View and let's see what we have this is the demo okay the cursor is like right there so let's add some styling we can specify that the cursor should have let's say what a width of 80. a height of 80 a background color of like a blue and then it's also going to be in position absolute we can remove the pointer events as well let's see how it looks border radius 50 percent Porter radius so it's rounded and then let's also do the same thing for the cursor label and then we can do like a display Flex and to just to Center everything here and maybe color white and that's looking pretty good and then for the cursor label we're just going to remove the background color put it transparent here and now we have a nice cursor we only need to basically do the same thing if you want like an exit animation and a mouse move animation as well the first thing we can do is create a wrap here so we're gonna have a cursor and a cursor label and then I can add those refs here cursor and ref cursor label and so here I've simply copy pasted the scaling animation and the mouse move animation from the container I've put that to the cursor and the cursor label and I've also changed the duration to be 0.5 and 0.45 instead of 0.8 to have like a nice delay effect and if we try this out here okay nothing is working I've forgot to change here should be the cursor and then here it should be cursor label and that's looking pretty good I'm going to enlarge that here and we have our final animation here a nice award-winning project Gallery so if you guys like this video please leave a like subscribe it really helps the channel and I'll see you in the next one bye

Channel: Olivier Larose

Views: 9,088

Keywords:

Id: XUYQoU_HA-8

Length: 15min 20sec (920 seconds)

Published: Thu Jun 15 2023