How to Make a Pixel Transition Effect using Next.js and Framer Motion

what is up guys welcome back I received an email asking to recreate this pixel effect transition that I've seen in a lot of awards winning website so today I'll take a look at three variants from it one animated from the center one coming from the left and one coming from the bottom I'll use an xgs and for a motion to recreate this and as always the source code and the live demo are both available in the description below all right so I have a basic maxjs application here I have two components inside of it already I have a burger menu and I have a header that I can toggle basically have a state and I give the state to the header and the menu appears if the state is active and then what I can do from here is create a pixel background component I'm creating a new folder for that with a basic react component and a style sheet and now the main concept of this animation is I basically want to have a huge grid with a bunch of blocks inside of it and then I can animate all of the different blocks and so the first thing I could do here is create a bunch of columns and inside of those columns I'm going to create a bunch of blocks and the first thought would be to create like a style with like a colon and then inside I would have like a bunch of blocks and then I could take that and like copy paste and have like a crazy amount of columns with a crazy amount of blocks that would be one way of doing it but it would become a mess like really fast so instead of doing that what I'm going to do here is create an array and so I'll create like an empty array of 20 elements and then I can just map that array and from that up I'm just going to return a bunch of div and those will be the columns and then I can go inside of the styling and I can specify since I have 20 columns I'm going to have them take a width of 5 Cube width and a height of 100 and then I'm just going to go into page Jazz here and import the pixel background and I can have it here and if I inspect the browser here I can see that I have the pixel background and inside of it I have 20 columns and they're taking like the full height and the full width of the whole window and now I can see that there's like some spacing all around it so for that I'm just going to go into globals and I'll specify that I should have zero pixel on the body and now I have a perfect grid with 20 columns each of them taking five deeper with and now what I want to do is render a bunch of blocks to fill each of those columns so inside of each column I'm going to have a function called get blocks and I can create that function here and now I need to figure out how many blocks do I need to render to fill the whole window the one thing I know is the size of a block so I can have here a block size and I know according to the CSS that the colon has a width of 5gb width and so I know that my blocks need to be five different with by five Report with and so the block size will be equal to the width of the window multiplied by 0.05 and that's basically five different width and actually I'm just going to extract the width and the height here from the window so that's a bit more clean and with that value I can now calculate the amount of blocks that I need to fill the whole height of the window and so here I can have amount of blocks is equal to the height of the window divided by the size of the block and once I know the amount of blocks that I need I can use the same logic here and I can create an empty array but now we're going to have the amount of blocks and then I can map it which is going to return an empty object and then I'm returning here a block and if I save that I should have an error because the length of the array is invalid and what that means here is the amount of blocks here could be a decimal number with like this division here so what we simply need to do is do like a math dot ceiling and this will basically round up the number and with that we should be good and now I'm just going to add some styling for the blocks gonna have them take a height of 5gbird width so they're a square right same height same width and I can do the width 100 and I can even give them like a background color of like orange like orange red and then I'm just gonna inspect here and I see I have my columns and then inside of one column I just have a bunch of blocks that are covering the full size of the window and I'll just change the color to have the color that I like and now that I have my perfect grid of blocks I can start animating everything and so for that I'm going to use firm motion I can import here the motion from firm emotion and then I'm going to create a motion animation here and that animation will be applied to every single blocks so I'll have an initial value here with an opacity of zero and then I can have a no pen value which is like an active value when it's active I'm going to put it in the opacity of one and then when it's closed meaning when it's not active I'm gonna have an opacity of zero and then I'm gonna apply this animation to every single blocks here so I'm just going to add some parentheses here just to have a nice formatting and I can do this like this and now what I need to do is add a motion in front of the div and then I need to specify a variance which is the animation and it's going to be the anime which is what we just created here and then I'm going to specify that the initial value should be the initial directive that we set here which is opacity 0 and then I can say when do I want it to be animated and now I need to have a state here and if we go back inside of the page.js I can see that I have my state here that dictates if the menu is active or not I'm just going to pass that value here if the menu is active to the pixel background and then I'm going to have it as a props here and then I can use that value to dictate the animation and I can basically say if the menu is active then I want to open the animation if it's not active then I want the animation to be closed and I can save that and let's see if this works and here we can see that when I'm activating the menu all the blocks are getting animated with their opacity and now I'm just going to change the transition here because if I don't specify any transitions it's taking the default of firmer motion which is like maybe 0.5 seconds I'm not sure and so I'm going to specify a transition and I basically want to have a duration of 0 for the open and the close and if I try this it's just gonna pop right away which is what I want and so now to create this pixel effect all I need is to figure out a different delay and so every single block of a column will have a different delay and that will create kind of like the pixel pattern so the first thing I can do here to add a different delay to every single blocks is I can pass here a custom value to the motion variants and here I'm going to pass the index of the block just as a test and as you can see here once I pass the custom as value here inside of the variance I now have access to the custom value here that I can use for a delay and so I'm going to do that here inside of the open animation I'm going to have the index and the closed animation I'm going to also have the index here and then I can have a delay and I can do like 0.01 and I can multiply that by the index and same thing here and I can save this and try this out and we have something like this all the blocks of the column are getting animated from top to bottom and this happens because we're passing here the index which is just a value from 0 to the amount of blocks and that's for each column and that's why we end up having this effect here which is not the best but now all we need to do here is find a way to instead of using the index as the custom value we need to have like a random value and that way we're gonna have like a random pattern in our animation and so what I'm going going to do here is create an array of delays and I'm going to take basically that array here and I'm going to map it and I'll return the index and then here I'm going to use that array and I'll return that and this is basically the same thing that we had before we're going to have the same effect but now I have control over the array here and I'm basically going to find a way to shuffle it and so to shuffle the array I'm using here an algorithm that already exists it's not mine it's actually the Fisher Yates Shuffle basically shuffles an array in place and so I can use that function here and I'm just going to shuffle that array here and now the delays here should return the same amount of blocks but now here instead of using the index I'm just going to actually use the value here which will be the random delay and I can grab that random delay and put it as the custom number here and now about random delay will be used inside of the animation here to create the delay on the open and closed animation and I'll save that and here I'm going to try this out and you can see that I have the animation and now I'm just going to increase the delay just a bit to slow down the animation because it's going a bit fast for my taste and now we have something like this now I'm going to change that delay to maybe 0.1 and you're gonna see we will have like a much slower animation and we can kind of control that and yeah that's basically the animation for the centered variation but now what if we want the blocks to come from One Direction and so I'm going to create another variation that animates from the left to the right so here I'm just creating another component that I'm going to call horizontal and I'm copy pasting the content of the centered variation inside of it and then I just import it inside of the page yes and so here I have the pixel background I've put it in comments and now I'm working on the horizontal pixel background it's basically the same thing now I just copy pasted the code and so if we try this it's going to be the same thing and now to create a direction it's actually going to be pretty simple if we want to do left to right all we have to do is pass the index of the colon when we create the blocks and so here I have the index of the column and it's going to be pretty easily I'm just going to add that index as a delay and so I can do the index of the column and I'm just going to add the random delay and if I save this I can try this out and boom I have Direction very easy but as you can see when we open it and we close it it kind of closes back in the same direction but what if I want to do left it animates in and then it animates out from the right right like the opposite direction like in Reverse what if I want to do that well it's going to be pretty simple too here the custom value instead of passing one single value I'm going to pass two values and so I'm gonna have an array here and so those values here will be for the enter animation and then I'm gonna have one for the exit which is the closed and here instead of having the index of the column I'm going to have a value which is 20 20 is the amount of columns that I have and I'm going to do minus the index of the column and then I can add the random delay and that should reverse the direction and then I can go here and this here will basically be an array of delays and now for the open we said that it should be the first value and for the close it should be the second value and I can try this out and I'll have this and now it's going out from the other side appearing from the left disappearing from the right and yeah we're done with the horizontal variant now I'm going to jump into the top bottom which is like the vertical variation and so yeah here I'm doing the same thing creating a new component called vertical and then I just copy the content of the horizontal components inside of the vertical component I go inside of the page.js and I import it there and we should have something like this just a copy paste of the horizontal variation and now I'm going to modify it to have the animation coming from the top or from the bottom so it's going to be a bit more complicated to do this one because the setup that we have right now is not the best right now we have a layout which consists of columns and so it's quite easy to animate from left to right but if you want to animate from top to bottom we need to instead of having columns we need to have the rows and so we need to change a couple of things here first thing is instead of having columns I'm going to have rows and so now that I have rows I need to go into styling here and now since I have 20 rows and I want to fill the whole keyboard height I need to have them taking five viewport height and I can have them taking the full width and the blocks inside of it will have a height of hundred percent and a width of five keyboard height which is basically like the the reverse of what we had here for the columns and I'm just going to delete that and here the flex Direction instead of being in rows it's going to be in column and it's a bit confusing like the color and the rose it's always a headache for me and so I can save this and I'm just gonna put the get blocks in comment here see what we have and here I can see that I have 20 rows taking the full height of the window which is exactly what we want and now we just need to fill every single rows with a bunch of blocks and so I'm just gonna take the get blocks function here and now the size of my blocks they're not based on the width they're not based on the height and so it's going to be the inner height multiplied by 0.05 and here the amount of blocks which is like I said a bunch of blocks inside of a row it's going to be based on the width of the window and so on here I need to calculate based on the width so I just reverse all the values and I'll save this and let's see what we have we have our first row here with a bunch of blocks as you can see the blocks are not in the right direction they're still placed in columns and so I'm going to go in the styling here and I'm just going to specify that this should be in display flex and I have my row and I have a bunch of blocks like this and I forgot I also need to add the background color on the Block so we can see what's going on so I can save this and let's try this out we have this animation now in rows instead of columns and so we have this effect of like top-down animation like this but right now it's coming from the top and it's leaving from the bottom which is a possible effect but personally I think it's a bit more aesthetically pleasing to have it the other way around so what I can do easily is just flip those values here I'm just going to flip them on the other side and now we have them animating from the bottom and exiting from the top which is what I want and there's another thing that I don't like is personally I think the squares are like a bit too small I would like to have them a bit bigger and so what I'm going to do here is instead of returning 20 rows I'm just going to return 10 of them gonna return 10 rows since I'm returning 10 of them I need to have them a height of 10 so it takes the full height of the window and same thing here I want to have squares so I'm going to keep them the same dimensions on both axes and here I'm returning 10 rows and so here I have 10 and then here the block size is not five year height it's now 10gbird height and if you save this we should have a different size for the blocks and now this makes a bit more sense to me personally but really you could choose exactly the amount of blocks that you'd like to have and so yeah that was it for this animation it's quite useful you can use that in like a bunch of different scenarios you could have it for like a menu you could have it for like a page transition you can have it to like for like a section transition in like a page so yeah if you like the video If you learned something leave a like subscribe and I'll see you in the next one bye

Channel: Olivier Larose

Views: 7,857

Keywords:

Id: IpDIAilIsrI

Length: 12min 47sec (767 seconds)

Published: Tue Oct 03 2023