Create lovely React 3D Animated Card | Beginner REACT.JS Animation with framer-motion

hi everyone in this video we're going to create this awesome nike shoes card in reacts with a 3d pearlex animation oh in react using the help of frame of motion so this is we're going to create this awesome card and whenever you go and drag over it you're going to see this awesome pearl axe 3d animation goes into it even the shoes is moving and everything just moves and tilts with awesome spring animators previously whenever you take it up it goes up um take it bottom goes bottom with awesome rotation and parallax going on with the 3d you can have this in your website wherever you can just like customize it however you're going to find the source code down the description below and you can find it in my github please go and follow me there if you really like this kind of like design and hope you guys enjoyed it so yeah without further ado i'm just showing you exactly what we're going to be using here is actually flavor motion i said before so this is the official website the second one where i inspired the design i got it from drewber.com and this is where i got it from this guys here wang sorry if i'm like misspelling your name but yeah this is where you get it hope you guys enjoyed the video tutorial and without further ado let's go ahead and jump parties to it [Music] so let's just go ahead and get started and sprucing here already set up the projects and got everything started up i opened vs code and created reacts application using the creates react up cli so for those who are just like absolute beginners and that doesn't exactly know how to set up a react project real quickly using react react app cli so you just pop up a terminal of your windows or a mac you've got a terminal or a cmd then all you need to do make sure you have npm and node installed so you got mpx then you do mpx reacts or creates reacts up then you give it a name give your project name your folder name so you can do like react card or something or react animation click enter and everything is going to be going into the right way it's gonna install dependencies for you it's gonna start a project it's gonna do everything all the setup you need so later on you can open it with your like favorite producer mining here is actually vs code and you can just go ahead and get started so we got everything in here actually we need and the react projects in here i added a couple of things in here like the images you're going to be using the universe i've seen the design before on on the intro of the video you probably know what i'm talking about so you got the images in here just like handmade and ready to go so we can put them into our design now before moving any step further we need to go ahead and install dependencies before just like diving into it because there are two crucial dependencies and they are like very important because they just gonna like allows us to you know this is the core of everything i'm gonna do throughout this video one is style components if you know me if you like watch my video stories you know me that i'm a big lover of stereo components i never do a video without starter qualities so it's like my big body and i have to have it in here it just basically also to use css in javascript the second one which is the most important one is frame of motion so frame motion also provides you with an easy api that allows you to enemy to react components with ease without any issues and it can provide you with a spring animation with regular css animation like linear animation transitions and so many stuff that you can use like you can use mouse events like dragon or hovering and stuff like that so you can just hook them up with animation the api the examples the documentation all of them makes a lot of sense and the learning curve of frame of motion is definitely really good so yeah i've got a video just like explaining the differences between framer motion and other uh really well famous kind of like animation libraries you can find in the description below and you can just like test them yourself so yeah um yeah let's go ahead and just get it started here i'm gonna just do yarn add and first things first gonna install the set side components the second one is framer motion so simple as that click enter and everything is gonna be installed i already did that already did the math for you guys so i installed everything and now i'm actually ready to go so i got the projects in here we got the simple react application we got up container and here being put to install components we got like awesomeness going on okay so here we go side by side and the reason i'm even having in here this by side of side instead of like my other story is just having a completely different page and just going through it it just basically because right now we got like a small card so it fits on this side-by-side kind of like you know container of of this small window so we can have it and it's much better to look in things in real time while watching the video guys for you guys so yeah i hope you guys can enjoy this kind of like content and have it this way now without just like rubbishly talking about stuff let's go ahead and dive into it and what i'm going to hear is actually to start with the components first in here as i said before i already had like some images like the air jordan or the shoes we're going to be like working with that i'm just going to use and everything here like the nike logo and so on and so forth so this is actually for the images for other components we've got a marginer i would most use this kind of like marginal components and lots it's basically just to do some custom margins so it's components you render it you give it like 2 a.m or like 10 pixels of margin it just does it for you either horizontally or vertically so that's basically what it is in that and yeah so let's go inside of the components and let's start putting together um the stuff that we're going to be needing so i'm going to be using like i'm going to start creating something called like a nike component or a nike card so you're going to do select no key card i'm going to do index.jsx and um yeah sorry for my arcade keyboard it's going nuts um so as we said gsx so we're going to start stuff really quickly in here and this is actually going to be the main component like the pairing components we're going to start working with so first things first you're good with the components you're gonna select import reacts from react as always i'm gonna explore the components real quick so i'm gonna just export nike um card it's gonna have some props which you will probably not gonna be needing and and yeah so that's basically what we need for a start now let's go ahead and start putting our container and the first container we want is actually the nike container card container which is you know the purge container where all the magic is going to happen so this is actually we're going to have it and if you're not going to notice in this video charge is going to go through a little bit quickly throughout the css and everything because it's not like about explaining the css it's about like putting the animation together and having this cool style with react and then how to join the parts together how to put them together with framework motion sound components and all that kind of stuff like that so yeah i'm not going to like focus too much on the css and you know the values because it's quite easy to follow along with that so let's import slots or import uh styled components here and it's going to do the magic for us real quickly so i'm going to have a width and height i already got figured out this one so just like not just wasting a little bit of time so i could use something like 2 85 pixels with a height of like 500 pixels uh it depends on you how you want it your preferences so i'm just going to have everything like little slim kind of card a little bit taller because that's how products card were like it's it's more like oriented towards like a device ratio you know what i mean so it's a mobile device it's like an application it's a shop so i'm going to have display flex in here we're going to have flex direction of column just to render stuff like in in a column way so for border radius who wants points huge border radius so i just want it to look like this uh modern kind of card looking so that's where we can just have it two and five pixels real quick as well so 25 pixels of the border videos um for the box shadow this might be like um you know user depends on how you look on it on your perspective so for me i'm just gonna just gonna use a really simple box shadow i'm just gonna use one pixel two pixels in here and one pixel for spreading and for the rgba i'm gonna use kind of like a grayish look so 31 31 31 and i'm going to use like 0.2 for like transparency that should make it work now for the background color we're going to have like um kind of a teal color from black a little bit grayish going to the blue so that's that's we're going to be using him she's going to copy the color and heroes christine the color palette is close it just goes a little bit to the blue and it gives a really awesome way so most of like the background color is going to be covered in kind of like black or dark color so this is going to give us a really awesome vine because the nike shoes we're going to feature in this particular card is is basically like a blend between yellow it's teal yellow or something and a black completely black and a little bit of white so that way we can just have the same kind of colors blending in and we can have the same theme going through just to make the card look um you know just like mixed up and it looks together you know so so that's exactly what we're going to be doing right here now the color basically since we got um a dark bunker i'm going to have it white and position um i'm going to have it relaxing in here just just you know for the sake of that now for the cursor i'm going to have it grab i'm going to talk about like why i have a grab label on as we reach the section of the animation because grab is going to give you this hand where you can grab the card around so we can have this uh grabbing animation going on in the card still not right now but we talked about it later on on the video so jump in again here as closely here we've got a simple car we can go in and render your ass but let's go ahead and put some other parts before jumping anywhere through so we're going to have zenko circle wrapper and uh this one is gonna be like basically for the circle where um we already had like a some circle we want to put inside of the card just to make it look that good and the circle is going to be like a yellow colored and then the shoes comes on top of it so this is actually the wrapper that going to hold the circle and the circle needs to be positioned as absolute obviously because we we have to like manipulate it however once you have to like move it like a little bit to the right of the card and have it overflow hidden and so on and so forth so this way we can do the trick on the css so i'm going to have position absolutely for this one gonna have it top zero and basically left zero because we're gonna have a full f and um full height okay and i would rather have it like minimum height because we wanted to take the full width and the full height of the top container which we can create in a second we're gonna have overflow hitting this one is kind of important because we want the circle to be hidden inside of this like wrapper we want we don't want it to spread out of the card so overflow hidden should do the trick for us right here and next one is actually border top right radius and this one is actually a track because in a bit if you have this circle wrapper to be have an overflow hidden it's going to overflow as well the border radius of the card and the card in here will have this kind of border radius on the top right because this one is going to be more you know the circle is going to have a position of the top right kind of like absolute positioned so this way we can override it you can see that in a second now we can go and create the circle itself so the circle the yellowish circle that we was talking about throughout all this time so we can have it and div again and um so have a position absolutely i miss the aiming position again so for the width we can have a 350 pixels for both width and height i guess that should make it really really good for the top i already got that determined so i have you know depends i want it to be going into like the top right so top minus 4.2 am and probably i want to write like minus 10 in because 350 pixels is quite huge compared to our width in here we got only 285 pixels so that should like you know we should you know take it like overflow it or translate it a little bit to the right to have this kind of effects of the circle going out of the car but not overflowing because we got overflow to be hidden okay hope that is actually making sense i want the z index to be five i want it just a little bit above not everything else because we're gonna not need other elements to go above the circle indeed and uh background color i want it to be teal kind of like yellow so um i got this color figured out here which is a perfect color for that kind of design which matches the shoes color and last but not least you can have a border radius of 50 and this one is going to make it a circle instead of like a rectangular so here this one is going to do the magic for us and it's going to make it look like a circle pretty cool stuff so we've got awesome stuff so far let's go ahead and render it here i'm going to have a card container then god's circle wrapper then um circle so just saving that and i forget about adding this into the gsx so it's going to do this so nike card pretty cool amazing we've got the card over already and the card is looking absolutely amazing already just like a standstill static card for now but everyone's going to be having a lot of cool animation going on through it now basic stuff done let's go and jump into a little bit more complicated stuff so we got the circle we got the circle wrapper and everything and it wants the car to be like partitioned into two uh containers the top container and the bottom container the top container can have the shoes and the nike uh big kind of like you know text as you've seen before and down there we can have details about the shoes like the shoes name and the price and the button where they can buy it and we got some like 09 key logo and so on and so forth so this is basically how i want it and how i'm how i'm going to just do it right here so i'm going to create two containers going to create the top container so this one is uh installed div so top container definitely is going to just take a width 100 it's going to display a flux direction of a column as we all know that uh this should be pretty obvious now for the flex property i wanted to have like 1.2 so it gets a little bit bigger than the bottom container because you know we want to have like big stuff going on in here so the bottom container is like smaller compared to the top container that's exactly what i wanted right here i wanted to have it all this like flex position kind of thingy so here we want to rely because we got some positioned absolute positioning going on inside of it uh aligning items should be going into center and this should do it horizontally for us so we want everything go to this horizontally and center and um justify contents i should use flex end because we're going to have like some text and wanted to have it like a little bit down here like at the bottom of the circle we want we don't want it to have in the top because the shoes are going to cover a little bit like almost the whole kind of like top container so this way we can have it just you know going down into the circle so it's going to create this awesome effect of this we will see that how it goes and um yeah so you probably need a little bit more like padding of it like a 1em top and bottom and 15 pixels left and right okay so i should make the job now the second one is the bottom container so styled div and we needed a bottle container so for the bottom container we're gonna have a flex again we're gonna have um here we got 1.2 so all is left for us is 0.8 so you know you have to do the math right here you've got two containers so you should sum up into two you do the math you get it correctly so we got padding again so padding i might have like um zero from the top from left um bottom zero and one em from okay i could have just like summoned this into zero one am that should make it a little bit easier for us to read and understand what exactly going on so here we can have a type container cool bottom container and you can have it at bottom cool so we got the bottom containers let's see where the text starts so this is where the bottom container starts and the whole top in here is actually a top container because we've got like 1.2 of flags instead of like 0.8 compared to the bottom container so do the math you're going to get it right anyway so we got the nike here we got everything we will need now let's go ahead we're going to be needing actually to add the nike text where it comes right here it says like uh nike and then and that's basically what it is it's going to be like a super big nike kind of like logo of it okay so let's go ahead and add the text to that and the reason like for adding a text is just to make it look a little bit better because we'll have the text on bottom here and um like on back then we're gonna have some the shoes comes on top of it it's going to create this like parallax kind of effective edge once we do the animation it's going to look super awesome once we just add the animation right into it so i'm going to be installed in here i'm going to have h1 so i'm going to be using the biggest as we could so it's going to be white color fff we got text transform check transform uppercase because we want everything to go uppercase right so margin zero because h1 has by default some margin we don't really need it and the z and x we have a 10 so we want it to go a little bit like on top of the circle right here as we've created it and the fun size um well you know it depends on what type of font you use but uh yeah we're going to have like 76 you will see how it goes in the second and the font ways we can have the highest so 900 regardless of what fonts we are using so 900 in here should make it look pretty pretty bold now speaking of the fonts i actually like gone and hand picks a little bit uh some of funds that could match this design because nike is like you know you need to have this like tall and slim funds a thin font so a gun and just like did some lookout for finds i didn't find much but what i'm using right now i'm using pragetsi nero if i'm spelling that right but there is actually others in here like matches this one so i'm just going to leave them here on the script all the css file and you can choose whatever he wants but i'm going to just say forget an error just does a good job but it has only 400 and 700 for bold and for regular so yeah you have to work with that so if you find another ones let me know i will definitely just like make a designer without fonts you know all the fonts that matches the criteria and just matches the nike theme or the mikey theme pretty much okay so yeah that's exactly what i'm going to be what i'm pretty much using right now um we can have it like circle rubber cabinets like um a nike text right down there because uh we wanted to go inside of the top container but you know remember since what we used uh that's like the top container has a flex end so it goes right into the bottom now we can have it like nike air pretty cool and it looks amazing already so yeah screws you know the text matches because it's quite thin and it's quite tall so it does it does a pretty good effects right over there pretty awesome stuff so let's jump into the most important part of the whole card in here is actually having the shoes just floating around right top here and having all that animation into it so let's go ahead and just put the shoes together and the shoes are going to like have some stuff like a lot of things so yeah i'm i'm gonna try to explain that to you guys uh depending on the css and stuff like that so i'm gonna have a shoes wrapper it's gonna be a div so this is actually the wrapper where everything goes in i'm going to have a full width and a full height of this because this one's going to be positioned absolutely right and we want the child the actual shoe's image is going to just like go into a flex direction it's going to align it to center this way we won't have any issues with like absolutely positioning and then once we come to the animation it's going to be a huge issue because animating in here and doing this parallax kind of like 3d animation we need to like uh offset the x and the y value the rotation of x and rotation of y and yada yada so messing around with this one it's going to override if we do any like top and left absolute position on the css so better not do it just rely on flex positioning and this is going to make it super easy to follow right so display flex in here we got um i'm going to use a line items to be center and justify content to be centered too so this way we can have it right into the center without even worrying about it and how it just goes right into there so this is a shoes wrapper now when it comes to the shoes is actually where we're going to be rendering everything like the image and and stuff like that so this one's gonna be shoes i'm gonna have style.div again so i'm gonna have a width to the auto why just to keep on and preserve the aspect ratio of the image then i'm just going to control the height so the height is going to say something like 190 pixels maybe the z index is going to be the high z index because it should come above everything on the card so 99 always make sure to use 99 just don't like overcome this value because it's going to be complicated for you to debunk your code and user selects none we wouldn't want to like this the mouse to be able to select that image because that will be pretty horrible now here the width again could have it auto preserving aspect ratio height 100 and um and yeah so maybe do another user select to be none just in case if something happens okay so the nike text in here goes right into there pretty smooth now we're gonna need the shoes wrapper and inside of it we have the shoes right and inside of this we have the image now the image is um we need to grab the image from our image folder right here okay so let's go ahead and import that very quick so i'm gonna do air jordan from going back going back again going back again probably accents images then air jordan png i'm not going to use the svg because it's it's it's literally the same as like the png one okay i'm gonna use air jordan image and hallelujah and yeah it does look good even though we didn't do any rotation to it yet it looks pretty good look like the shoes in here is just like um there's a lining on top of the tanks and these are creating a pretty awesome kind of effect into it already so it's making it look absolutely awesome uh at some point but yeah we wanted to rotate it a little bit into like um 25 degrees or something just to make it a bit like a study or something so we can have it right on top but what i want to do i want to have it bottom here and i have like rotates and i want to have it um minus 25 degrees i believe that's gonna work probably not but um yeah so just to make that work because later on we are going to convert this styled dev into motion.dev to be able to use frame of motion into it so let's go ahead and do it right now and make sure to import motion and this one is going to allow us to import motion from frame of motion and this one is going to have all the elements all the html images you ever know all i'm going to have in like be able to find right here and you can like manipulate and animate real quickly with the motion api so here i'm going to be just like a motion.dev that should make uh make the job and this is not the one you're not going to need the wrapper indeed but we're gonna need the shoes so motion.dev and there you go so we got the rotation going on a little bit uh but it's kind of like goes on the top while we don't want it to go like a little bit into the top right there so we can just go ahead and add some margining to it to have it like uh goes a little bit into the center because i think the image is not really fitting right so i can do margin rights and margin top to be both 2m and that should make you a little bit better here [Music] not really sure how it should look but um not really sure so we can have this one i think i think it's it's good this way maybe we need like a bit more into it a bit more here yeah yeah it definitely looks better now okay so you can you can tweak that out and you can find this sweet spot for you for your design and you can have it going on so now we've got the shoes pretty good and it's going actually above the text which makes it look super awesome and the color in here in the shoes matches the color on the circle which is the yellow so everything goes pretty smooth so we got all the colors on the shoes the same on the card like the black the yellow and the whites all of them are here so it makes a pretty good design and we have it all going around there so pretty cool now we've gone the first section done and completed it just like looks uh pretty amazing let's go ahead and work our way out into the bottom section and add some shoe details like the name price and yeti ariana so this should be quite simple stuff to be adding so i'm gonna have gonna go and add in here uh maybe i'm gonna just like name it choose details.jsx i'm gonna go quickly and add the components into it so i'm gonna export choose details real quick from that so we can have it like having the props and everything so we got um everything should be like running in here and we can like add details container which is gonna work as a the main container for our like bottom uh section so styled make sure to import that we've got solid and everything i'm gonna have like width to 100 pi to the 100 okay that should do it um also we need to make sure to use flex direction or display flex and flex direction to be column because you you you have a complete column in here in details containers one underneath the other so that should make it pretty good now for batting excuse the bottom here is going to a little bit into the top i wanted to go a bit into the bottom just to have the design look a bit better so we can add a little bit like a padding to it like 2.5 am we can add the six pixels to the right zero pixels to the bottom and six pixels to the left so that way it should look a bit better so last but not least we can do line heights like 1.4 and that should make it perfect already so this is the details container nothing special about it now let's go ahead and start adding other kind of like components to style that out like uh medium tanks to the title and the price tags and so on and so forth so i'm going to have the medium text in here so the medium text in it's gonna have like um a span into it this just gonna you can put the name into it and other medium small like size text so uh the font size this one can have like 18 pixels colors always is going to be white the font weights you can have the highest one or something like 800 even though our font doesn't support it so always just choose something big it will fall back into the nearest one which is 700 before it and uh so last but not least text transform should be upper case pretty cool so this is the medium text you need the small text so just copy paste in so the small text here should um maybe look something like uh 11 pixels because we want something pretty small and you can have this like either 600 or 700 it's just going to be small you're not going to be noticing the same font way there so it should it should make it look a bit better there um we're also going to need the price so i'm just going gonna just copy paste all of those because they are literally the same so the price in here i'm just gonna change the font size and i'm just gonna okay i'm just gonna use the same font size for the price it's going to be the same as the medium size i believe so why even bothering adding a price there just doesn't make sense and it wants another container so literally i'm just going to use another container that allows us to like horizontally and just do a space between flex space between container so we can just wrap it up and we can have all these components goes sideways and can have a space between them real quickly with this cool components i'm going to create so i'm going to name this paste horizontal container okay so space horizontal container is going to use flux direction and um so i'm just gonna do okay so i think [Music] i'm gonna use justify content so space between and we're gonna use a line item to vertically align them and we want them to have a width of 100 otherwise it won't work the spacing so that way it should look definitely better pretty cool stuff now yeah let's go ahead and render stuff here i'm just going to render details container then we got [Music] small text small text i'm just gonna render my key maybe nike air i don't know we'll see how it goes i'm gonna have a space horizontal container for these i'm gonna have two medium texts one is gonna contain the name of the shoes um this shoe is likely just like has a pretty weird name as many other nike shoes so i'm just gonna i'm just gonna use this one real quick in there so uh just look for that name real quickly that that should be it it's a night here jordan one made scgc for all this like color palettes and stuff like that so that should do this and for the price i want to have something something cool i don't want to use like um another currency which is the japan yen if you're familiar with this just like a japanese currency so let me just copy that real quick as well you can have it right here and that should make um well we'll see how it goes in a second so let's go ahead and render out this into the bottom container so i can do choose details you can have it and there you go pretty awesome and it looks awesome already got nike air ain't got like air jordan one mid sc gc and here instead of like here you can just have a nike oh not that one it's this one there you go it should look better we've got like space between them and the padding and everything and the card looks amazing already i'm just like you know i'm kind of like in love with this kind of card design i found it like a jiggle said before i will give you the link in a second after fishing this video so this is the first one i'm gonna have the second one i think i can just this this one and we can um jump like um i don't know into this one so here we can have like a buy button so you can press it and you can buy these shoes or whatever and you can hear like have a text and inspiration text like your next shoes or something whatever you can have whatever you want there and we want to introduce some marginer to it so i'm just gonna use our special marginer components not really sure is that so this one is actually inside of marginer cool i should have moved this and i should like save everything to get stuff into it so let's save that again got pretty horrible issues going on okay i'm just gonna delete one of these and marginer is not defined yeah sure or decide so we can go ahead and import it manually without using vsco superpowers so imagine if um margin awesome so we got the marginal there that's going to add like a direction we want a vertical direction i want to add the margin of like 1.2 am or something and that should make it look good already pretty sweet now last but not least we're gonna have the nike logo which is um or before that and i'm totally forgetting about the the button the pi button pretty much so we can have a buy button here like we can have it's um you know the same color yellow color whenever you hover over it is some cool transition or whatever it's not really that much of importance so we can have a buy button it's going to be styled button in there so um we have some padding into it so 10 pixels by 16 pixels um background color luckily i'm gonna use the same yellowish kind of color that i used before um color obviously i'm gonna use zero zero zero for black and still black is going to show up on top of this color without any issues text transform upper case again and font size we can we can do something like 16 pixels the front ways i think 700 should make it happen at some points no border or none so uh i don't think we need to do bottom line we need to do like border two pixels solid and transparent because we're gonna just like animate the border and remove the background so this way we can have is a placeholder so whenever we hover over it and we introduce a new border it's not gonna cause any css issues where you see a flickering of the button or something this is always always a good trick so whenever you work with portal animation and border transitions of your css elements okay so i'm going to have an offline 2 with none to remove the outline the cursor is going to be porno as always transition you can have it all to 90 milliseconds is in and out okay that should make it happen and last but not least we got the border to be well i think we already introduced one okay so we can have uh three pixels on top of here cool now we can have hover so whenever we are hovering over it we can have a background color to be transparent and the border is going to be three pixels solid and you can have it the same as the background color and last but always don't forget about just changing the text to fff otherwise it won't work for you so here you can just next to this one we can have the buy button and we can have buy and i'm forgetting about the border radius which i think high pixels should do the job um not sure what we could use for this one well that one seems pretty good and there you go it looks it looks cool and amazing already so we got your next shoes and you can buy in there um and it looks looks amazing already pretty cool so let's last but not least we could have the nike logo uh like down there just just you know this is a nike card so we want to have like a signature oh this is actually a nike card okay so sound and dev and always a good ui to include this kind of like type of signatures right so weight is going to be 100 percent i'm going to have a height of a 30 now with this part of flux line items to the center and justify content to be centered to because you want the full logo to be on the center of the card either horizontally vertically now you have the image here you can have it with auto to preserve aspect ratio again and heights maybe 100 to reach that height or you can simply have it like 15 pixels i think because 100 or 30 pixels is quite huge we don't want that so we can have it there so we can do a nike logo um so image and let's go ahead and import that so from going back assets images cool so nike okay it's not like the logos monkey image and there you go we got the image we got the logo the signature there and it looks amazing already so just like in love with this kind of chord and it's the moment of truth let's go ahead and add this kind of like 3d animation into us and make it look absolutely amazing so let's go back into the um nike card and this one we need to convert it to a motion like motion.dev so in order to be able to use the motion animation api so i'm just going to do motion dev and whenever we need that we need to convert it into a motion.dev otherwise it won't work for us so here for the cut container we're going to do some animation whenever we drag the card like we drag the mouse like uh to the to the left or to the right it's gonna create this kind of like circled grounded animation of this car so it looks parallax and and we want also these shoes to move along the card as well to make it look parallax and just like pop up the z index which is the 3d index that's what basically the index is so that's exactly what i wanted here now for the css it has like this kind of like weird perspective property and for putting this and being able to use it and not create this kind of 3d effects we have to go ahead and add the parent to the card container because here we want animating we have to or we want to add the 3d animation a 3d z index animation into the card container itself so the parts of this card container should have a perspective property that allows us to tell how the card is actually going to be tilted and how it's going to be rotated on the three z index or like three axis or 3d axis sorry so for that i'm going to create another component um let me go here i'm going to create pretty simple just a card dropper and this one and it's going to be a dev all right so it's not going to have anything special or that is going to be like 100 of width and it's going to have the most important property which is perspective and we can have it something like um 2000 or something so this one's going to determine how the card is going to be tilted and how it's going to be like rotated in the 3d world and this is where the perspective is so that's what we want in here and we can just have it goes on top of it so it's going to be card proper i should go right into there we're not going to be seeing uh i mean not a huge stuff but there is one thing we are pretty much seeing right there so we can do display effects online items center [Music] justify content center okay cool yeah that makes sense right now and it makes it look good all right so let's go ahead and add the animation into it and for this guy we're going to use the um like the hooks the hooks functions that frame motion going to provide with us to manipulate uh the drag in here so whenever here instead of doing like one mouse and whatever like we do on mouse drag and yeti area frame motion makes our lives easier as i said before and it provides all of this for us and with just like super simple and easy hooks functions we can just have like the x value the y value then we can start manipulating how the card can tilt it so here we can have x we can use uh use motion value and this one is kind of like an advanced this one is going to provide an x value that is readable by the frame of motion um elements there so that's why we're going to provide it right here that's that's all the reason so motion value this is the y and since here we want to have like this 3d kind of animation we want to rotate it in a 3d world right so we want to rotate the x and the y and we want to add like a z perspective into it as well so i have a quarter x and for this one i'm going to use transform so this eos transform is provided as well with frame of motion and it's going to allow you to interplay some values to another value so if you've like watched my previous video tutorials about animating this is just a basic interpolation so for example you say if i receive an input between minus 100 pixels and 100 pixels just translate this particular one this particular input into this outputs into like minus 30 and 30. and behind the c is going to do the math for you so whenever like for example has 100 percent you can have it as an output that's a 330. sorry so that's what gonna happen there and this is just like for normalization because you don't want to rotate like 100 degrees because rotation versus um like translation or like you know normal x and y values it's not the same because rotating is just like 180 degrees then there's up to 360 which the full rotation so it doesn't work like that so we want to rotate x into the y and for those of you who are saying y using y in here no i'm not wrong just basically here for rotating because the axes are inversed and the rotation axis are inverse compared to the regular axis we know so we have to inverse it in here and have to like to be able to see it normally and be able to the user interact with it regularly okay just like a normal mouse interaction all right so here i want i said before from minus 100 to 100 so whenever it is actually going to be the y value is going to reach minus 100 this one is going to translate it to once into something like 30 and minus 30. that's basically where it is and this one is for the x one and it's just a basic um math and that's how our css works now we need to use the x for the y we have to do minus hundred as well and whenever we reach another minus you want to just flip that one i'm going to have minus 30 into 30. this way it will work because as i said before the axis and the rotation axis are inversed so we have to inverse them this way in order to work so whenever we've reached like 100 percent our story 100 pixels we're going to receive as an output to 30. so this value is going to have 30 whenever the y value is going to be 100 and it's going to interpolate all the values from minus 100 to 100 to this particular array so that's basically what use transformer interpolation is okay so this one's going to allow us to do a pretty awesome stuff into our components so let's go ahead and encode this one into the couch container so we got the concentrator have to use this style in here which is provided by the frame of motion because here we're using a frame of motion element so we have to pass in the x the y the rotate x and the rotate y okay pretty cool stuff and last but not least we need this z one so this d here is gonna determine like the perspective of how much the card is gonna pop out of the out of the ground out of like the you know the background this this is the main reason just like for creating a 3d animation so this kind of like a z pop up so it comes closer to you and we want to just to have 100 in here because it's just like the simple card to create the parallax effects pretty cool so this one is just going to have like this values interpolated for us now we want to tell it's like whenever we drag the card like whenever we drag it we want to have this this kind of like animation and we're not going to use on mouse events or anything like that because likely we've got frame of motion and thermal motion has everything ready made for us from scratch and you can just use this awesome api so if you provide the dragon here's question here the documentation states enable dragon for this element set false by default but center through drag in both directions so here whenever you set true is going to allow you to drag this element depending on this x and y values that you have just provided so these ones are just for interpolating the rotate x and y so we can have a proper rotating x and y then we can provide them right there so we just say dragon here and it's going to be allow you to drag it out of the box so if we test this one um still still doesn't work because we don't have um so the drag okay elastic so the jack locks you can hear it's a variable that allows you it tells you how much you can drag so it's it's a really small variable so i'm gonna use um for zero sixteen okay i'm using this as an object and there's last but not least there's the drag constraint and this is actually a constraint like from top left bottom and right that doesn't allow the dragging to go out of space so we want top to be zero all of them to be zero actually so right to be zero and volume to be zero and this way we can have this constraints that you know the dragon doesn't flip over all the car doesn't flip over in the origin and stuff like that so this way we can have it like a really clean and really smooth and how it could um work another one here is actually have like while tapping we're going to apply some styles i want to like change the cursor into grabbing okay just to make that work so if we refresh for some reason it's not doing the um full potential of like how the card container should handle this so so here we didn't provide the initial value and make sure always the initial file starts from zero so it starts always from like the origin of of like the x and y axis to have a proper animation so just add that save it and you can have it really awesome drawing animation out of the box lucy i'm dragging in here with the mouse going down again just going to tilt it down going up going to tilt it up left and right it looks pretty pretty smooth and all of that perspectives can you see here whenever we drag it's going to rotate the x and y as well as it's going to do this kind of like z uh kind of like popping we got z set 200 so it's gonna pop it off the ground so it seems it's a 3d thing well it's just 2d it's not really 3d but just this parallax effects created by the css and all the magic behind that it's gonna make it look 3d and make it look absolutely amazing so pretty simple screw this in here using frame of motion made our lives easier and i've been able to add the dragon without doing any kind of mouse event handling any creepy stuff just pretty simple stuff and oh into the components perhaps just to create write that into there now we got the card container the second one we want to animate while animating while dragging the card is we want to animate also the shoes so we want to enemy this one so whenever we drag the card one of the shoes as well to move and we want it to pop it off the card with a z of like a thousand or something so the bigger it is the better it is it's not really the better but it depends on how perspective you want and the types of like you want to compare with but that way it should work perfectly so for that particular example right here let's go ahead and make the shoes um a motion diff which we already did by the way so that is that is pretty good actually so all we need to do right here just go ahead and add the x y rotate x and rotate y that should make it um good or ready for us to have it and i want the z so we can have it like uh ten thousand probably this is i'm pretty sure this one is going to be huge but still so we can go ahead and add a dragon into it i can do um drag elastic into something 0.16 or 0.12 just just you know to have a different uh dragon behavior than the card and um so we can do while tapping just do a cursor okay of grabbing again so whenever we do it as we see it looks amazing already and it pops off the ground for us and he makes this really amazing kind of look so seriously whenever we took it up like we can see underneath the shoes and which is which is pretty amazing though look at it so we can have it down and this creates this parallax and whenever just like you leave the mouse like leave the mouse it goes back into the place and the shoe just comes into like 2d space again and like nothing happened you drag it it becomes 3d you leave it it becomes 2d and he comes back into the right place he was in before and that is actually just amazing to look at and to work with and you can have many much more so history you see whenever you drag on top we can read the nike air tanks beneath it which is you know it's a parallax kind of effects with a card and how the shoes work you can have it down there but what you can crazy do as well you can even have the nike air text here beneath you can have it as well have like this 3d rotation a little bit slightly different than the shoes just to make it a little bit like you know parallax kind of effects and you can have a different z value for it and you can have an awesome animation going on through right there so yeah without just like super complicated stuff a couple of lines of code frame of motion and we got an awesome 3d animation right on top of react with an awesome nike issues card so yeah that was it actually guys for this particular video tutorial i hope you guys enjoyed it as i just like enjoyed creating this card i'm just like in love with it hope you guys enjoyed i hope you guys actually like the design i'm probably going to provide the dribble when i found this one i'm slightly like made this difference because i don't want to just like go and add a lot of elements that doesn't make sense because our video is just to design something that has a 3d animation and 3d effects and reacts in a small effort without complicated parts with frame of motion obviously so i said before thank god for watching hope you guys enjoyed this one if you like this type of video choice would i just go and explore the wilds create something creative cars like this stuff like that that would be awesome because i love doing this kind of things ui ux stuff like that reacts animating and stuff like that on the ui so let me guys know i would love to have all of that for you guys and i would love to create much more creative and better videos and better designs for you guys so without further ado hope you guys enjoyed this step before and catch you all hopefully in the next [Music] [Music] ones [Music] you

Channel: CoderOne

Views: 9,447

Rating: 4.9869709 out of 5

Keywords: React, responsive, react responsive, build react app, react app, css design, react responsive website, react css design, react css, simple website, react for beginners, beginners react, React with Redux, 3D Card, 3D Card Animation, 3D Animation React, React.js animation, React 3D, React 3D Animation, React Animated card, React pro animation, React framer motion, React CSS Animation, Javascript 3D, Javascript 3D Animation, Javascript Animation, React spring animation, CSS

Id: cPKiilXlHAQ

Length: 57min 48sec (3468 seconds)

Published: Sun Feb 28 2021

Reddit Comments

[u/TheMFingkhalifa]

Omg this is so awesome...

[u/BennoDev19]

that looks sick..

thanks for creating such cool video :D