Hello friends, how are you all, I am
back with another new video, now you guys are thinking. You must be wondering what happened to my voice. Actually,
nothing happened to my voice. I thought that Why don't we talk by changing our voice a bit?
Why don't you say something? Guys, we will talk in the original voice, so
today I have a blast for you. I have brought the video on React, okay, you
guys talk on React, brother, video. bring it And you guys say bring a video on React,
bring a video on Reac
t, okay today I have brought for you a video on React
with very cool animations. You have heard the name of Framer Motion, well
today we will implement it and create a very Would you like to see how great animation will be made?
Let's see it, see it right now on your screen. Something must be visible on it, ok, it's
nothing, it's a simple page, as soon as I go to this I will click on it, see Ma Kedar animation,
it is ok, I have backed it, it has come back, it is ok. The thing is fine, if you wan
t,
you can change its color also. You can customize the color of this animation. You can change its animation style.
You can change which side you want to animate it from. It's ok, the animate is going from left to right,
you can make it go from right to left, top to bottom. You can get it circular, you
can do whatever you want, it all depends on you. Okay, so I will tell you how to
do this and you can implement it and tell us. If you want to post it somewhere, please tag it.
Fear Gravity Coding
. Sorry Gravity. Dot coding guys don't forget to put dot ok
dot is very mandatory let's get Started Okay, so friends, we are
on our computer screen and you know. Like we will go as usual
in our le folder and here look how many We have prepared all of them, if you have not checked
out then we will give the link on the I button. Go check out the entire playlist and find
one of the best animations we've come up with. It is created here, let's name it
Gallery, I think so it will not be created with
this name. Come on, no problem, it's great, we
will open it with code and as you know That's what we will code today, what kind of code will we do,
you know right in Ri Jas so Ri Jas How to install it with the help of white,
okay let's open it, what has gone where? Man,
why does it go to another screen or come here? Okay, so see that this thread has opened,
either you can open the terminal or you can control Press plus back tick or come here run s
terminal sorry terminal new terminal ok Come her
e, you don't have to write anything, okay, you
don't have to write anything, you say without fear. Write how it will be run, ok, we will tell you, see
what to write, npm create white tere rate. You will tell me the latest now brother, you said
not to write anything, then you wrote, see, you do it. Copy paste ok, you can do this code,
copy paste gallery project name here. Give anything gallery is misspelled
let's react and react we will code We will use it with React and we will use
JavaScript. O
kay, let's go quickly. Inside cd gallery and will install npm here
ok see all the steps There is nothing to get confused about written here, it is okay whenever you open a folder or If you create it then you have to go inside that folder and
then install npm, then what? Whatever you see in that package,
I will show it here as if it is a gallery folder, okay. Here is the package name file
according to all the dependencies inside it. What will be the package? The folder containing our node models
will be downloaded, okay? So so what we do is npm
install ok and here's what we got What's this? Okay, the image has arrived, no problem
. Delete OK OK let's do CLS and this whole
thing is gone OK and what do we Why will we do npm run dev Why
will we do npm run dev because the script that we have here I am Deb and she is White, which means what do we
have to do to run this project? For this you will have to write npm run dep.
Believe it or not, we can also change it. I can change it, okay, let m
e show you,
wait, first see this output, are you okay with this? Our proper React code, Fight
Plus React, is running here. You can see it by increasing the account, okay
reload the page, so if you want it It's okay to change like if we want
we don't write npm run dev we write npm run gc ok look do gc
here just change it from here i Change it. If you change it, it will not
work. Kodava will say, it will not work, do anything. Okay, so don't change the one here,
do the one on the left side, what w
ill you have to write now? npm run gc enter ok pat e
already means already running so one thing Let's do one thing, let's do the work,
where are you going, where are you going, I think One second it's going on somewhere else. Okay, so
the project we were making was going on. Come on. No problem, turn it off again,
turn it on again npm run gc ok look 5173 p has started ok
no problem problem look at this no problem There is no problem here,
after increasing this account, it is okay, so you can cha
nge it whenever you want. If you want to change then
it is okay to go inside the script on the left side i.e. script and It is okay to change the value on the left side,
it will run only if you change the value on the right here I changed it and
wrote my name in place of white, it won't work, ok, stop it. Let's do this and focus on our main thing, then come to the SRC folder. And here. Coding coding is ok this is
ok and will check in the output see Gravity coding is fine, it means
we have remove
d all the other things and made it simple. Wrote a text like 'Gravity coding'
ok, see what we actually have to do. We are making an image gallery. Okay,
let's say there are many galleries, right? Meaning it is category wise, so assume this
is the category page, okay here we are Will give two categories and whichever category
you click on, those images will appear. Will open the gallery but the main thing
is what we have to show here is the animation when that page one When switching from one pag
e to another it
is ok then how does the scroll switch happen if I Let's show you here, let's make a y'all and
come inside this LI. Okay here. Put link tag ok and
what do we have to do for this? First of all react router You will have to install dum. Okay, so come here,
open a new terminal in the terminal and Write here npm i
react router dom ok write this enter Hit OK, it will be installed in a few moments,
ok, it won't take much time, a little bit It will take a moment, it will be done in a mom
ent, cut it back,
okay, then here you write L.I.N.K., see. And here it will appear that this reactor team
is ok, it will be automatically imported and you will get We just have to close it and
what will we give inside it, we will give the URL, we will go to and Will write in two and where did it run here, come here
equals two and here, assume that we have given Slush Gallery Okay spelling please don't go brother
I make a lot of spelling mistakes okay Is and write here gallery ok write like this
if now you will see the output output output where gone terminal terminal terminal good server
shut down no problem restart If you write enum run gc then it
will start, why write gc? There is missing script GC, missing
script bhaiya, it was just changed. Let's take a minute, this is the gallery inside the gallery.
Okay guys, so we can probably go to the outside folder. So what do we have to do? We
have to come inside cd gallery again and write npm run gc. Yes, it is working now, okay, so this
is
our port running here and refresh it once. If we do, nothing is visible here,
why is it not visible now, why let's see? I don't see any errors on the console and
read here. are the base What is the error in the name link component? Okay
, there is an error in the link component. Let's go. No problem, let's solve it, how
will it be solved, so first come to the main section. ok what to do here
import who browse router ok Import the browse router here, it
's fine, copy it here and that's it. No, t
his tag that comes in the browser is fine,
run the app inside it and that's it. Finish now reload the page here see
error solved guys error solved ok and a little more Let's zoom in, it looks like this, okay
so this is written gravity coding and if If we click on it now, something will happen,
see, only the URL is changing, the rest is There is content, it is not changing, ok,
so how will we change it, then let us know simple. Now we have to do routing here, so we
will do the routing, come here
and let's go here. It is in app.js itself, okay, here we work,
which we do all night, here only. Okay , let's create a new component named Gallery inside the Cersei folder. Gallery That's Actually How It's Done
But It's Okay To Run In White Does not support if you
are writing JESS code inside it and its extension is Jess will not support, ok so
don't make such a mistake even by mistake. Take gallery
overview overview or main write something like this Ok let's take it and delete this account but
there is no need for these two things three Remove these things also, okay,
keep the useful things here and these things. We do one thing from here, we
pick up the things, cut them here and Let's paste it here,
instead of this in the gallery, we will paste it and which We imported the link tag here. Okay,
cut it and paste it inside this one. Will give like this ok now come app.js in one ok
this is our app.js Ok, we will come here and we will create a custom
element or create it with any name. Cr
eating a variable where we
will define all the routing, what will we use Router use route use route this one is ok
import this one above and one here We will create an array, what will remain in the array,
nothing simple, just define a path here. What will we do, path is ours and everything
is like if path is ours slash means anything. If it is not the home page then what will we render?
The element is simple and whom should we render? If the gallery is ok, then we will import the gallery here.
Ok, now it is done. We will have to pass this also, that means
we will have to return from here, so how to return? Here we will put the bud
bracket and write inside it react.clone element ok clone
element and what will the element do inside it We will pass it to
the l element that we created and along with it a One more thing to pass is that okay
what will we define in location dot Path name is ok, path name is ok,
now what will happen now is our routing. Will it work properly? How will it work?
Let's
show you one thing and create another page while doing one thing. So that we know, come inside SRC
and create a gallery view, it's okay. m inside which all our images etc.
will be kept, make it exactly like this and do it here RFC is fine and write in it
that something like Gallery View is fine and where to put it We will import this, we
will create the same here exactly how and the same. Do and after slush here give gallery
view okay gallery View and here we have imported the gallery
and
we import the gallery and it is fine. The work will remain like this, there will be no space,
it is Ural, we will never give space in Ural. Okay, copy the URL and come here,
refresh and what's the matter? Came on some console and refreshed it what
is it saying write not def ok say react Defa is not working,
how to import react while defining react? This is what we did with React, we
put P and Y here, it's okay, and read the page, it's okay. Requested Module Name Default
Where AGS aq ok ok ok ok
ok ok ok
we imported it in the wrong place ok Actually we have to import React into React, where did we get it from? Here we are picking it up, see
react it with react router hey man React is ok from where react this
and you do page Rid The argument must be Rit element but
you pass null Okay what have we passed Null pass it or pass it Brother, if there is no tap then
we will pass it. Okay, let's do one thing if condition. If the element is empty
then it will return null, otherwise it is ok. Wha
t will we do, we will pass it, ok,
refreshed, ok, this is the error. Solved it's ok because look
at the gallery we didn't have any URL So what was happening was that error was coming if
we slash and go back to this, this Look it has come back okay so if if which
is route is okay means route means since if The URL we have given here is fine
if it does not match with anyone else. What will return tap do? Ok here
what you can do is return here you You can return the error page. Okay, so
what we did
here is just tap return. Okay, now what we have to do is
if we go to this URL, okay, let's say This one goes to the URL with slash
and this one goes to r and see what comes. The gallery view is coming, it is fine. The gallery view
is coming, it is fine, which is what we wrote in it. Meaning, our routing is being performed.
Okay, so now look at the main thing here. What is this? We have created a gallery and change the URL here to view the gallery. It's okay, it works, let
's make one more, two
will remain like this, two will look good. Ok come back ok refresh ok
this is two see see now see one thing As soon as I clicked on it, ok, this
came, no animation came, ok, none. Animation not coming back come back click on this
no animation is coming ok now How will we perform this animation?
First of all zoom it out and then do some You don't have to do this, you just have to download a simple package, come to the terminal here what to write on npm
install React Famer is working on some late
check late
work but let's go and come here. write
react framer motion ok npm react fumar motion this thing yes it is like this it is okay
to copy it I looked at the code I said No, you don't need to write, just
copy the code, copy it from here. Do it okay so that the package is
downloaded correctly, that's why I say copy. Get the code done, write down all the code,
copy it and install it. Ok, that much is done, I have installed it, now
close it and delete it from here. Okay, now come here, okay,
now see
where we have to perform that thing actually. We have to perform inside this okay
when click on this this is the link tag What happens when this is clicked, that
animation is performed and switched and so on. If it is ok then how to do it simple, let
's come back to it, yes, it comes in the code. Okay, and what will we do after this?
Whom will we import first? Import will write here
motion is ok from framer motion and one more thing What is the use of what we have to import? In use e pr
esent ok this thing
imported this copy and one of this Create an instance, how to do it, ok,
write const, ok, const, and write this. Present Okay,
created a variable with this name and just called this here Okay. Its an instance has been created ok
now where will we use it let's use it Let's say okay, now look, we
have imported this motion here, now use it. Let's show here, write motion dot div. Okay,
now this div is ours in a motion. It has been converted, okay now here
we have some elements, m
eaning here we have some Variables have to be defined so that it
can be performed, how will it be done then see the initial What will be our initial level? We
will define it. If then what will be ours? We will have to pass something like this
in the array, ok as an object, ok What scale will you pass to the object?
Okay, what will be its initial level? How much will remain in scale It is above ok what will we do now we
will animate ok look the suggestion is coming animate what to do scale x to -
1
ok not human do it to zero wrong wrong sometimes gives okay okay
scale one done do this much now look one The thing is done, it is ok, come in the output and
do this on the page, now look, click on it. Did something happen, nothing happened, why didn't
it happen because it will happen now, wait, just wait. Be patient, wait, be patient and watch the work,
we will have to do something in this and which Is the transition ok?
Will we add the transition? What transition will we do with it? We will
ration the duration as
0.5 seconds is fine and we will do this circular
out suck something like this ok if you look now There is no output, still nothing is coming,
tell me brother, what are you doing, nothing is coming. Hey friend, write down the entire account, see one
account does not work, the entire account does not work for you. I have to write, it will be useful, what will I do in a crisis,
I will write in the agent, scale one is ok. What will you define in scale one? One
is fine and what
will you give in it and what will you give transition in it? In this also the transition is fine,
the transition is given and there is the same thing inside it. Here we have defined duration and
it is ok, copy it and paste it here. Do it, its derivative will
be 0.5 and whatever will be equal, do it. are circular n ok let's do circular n
ok so much done now look and you will get one thing And we will have to add the style which is
our simple style which is fine. add it
write here write here scal
e sorry origin x Ok
Origin Use this present and
create an instance of it, we here We will use it if it is okay if the origin is x.
It is okay, meaning the value of origin x is If it is zero, then what will he do, that is, if
there is nothing in this present, then he will be at zero. I will return it, what will happen and I will return it,
okay? Okay, so I did it and look, come here, last,
okay, read the page, nothing happened. Nothing is happening, brother, what are you
telling me? Nothing is ha
ppening, look! Whatever I tell you, there
is nothing in between, everything is at the end, the whole code is there. You will write only then it will be performed. Okay,
come here, name a class. Okay, name a class. Suppose we
have named the class with the name Color Green, OK and copy it. Do one thing here, don't look at this,
don't look at the class name here, directly here. What can people do a a a a a
background whatever the background color is right Give it green in the background, ok,
nothin
g will happen, still nothing. Because we have not done the main thing, okay
come, we created this in app.js one. We have this, this, this, this, this, okay, so
what does this have to do, this, this, we wait You have to get weighed, I mean, you understand that the weight
is okay, wait, wait, girls like that. It makes us wait, by the way we
will have to wait for this also, how will we do it, see this. Write in place of the MT tag that we created. Where did Animate Presence go? This Animate
Presenc
e is fine, which is in Framer Motion. Automatic import will happen, okay,
correct the below also, animate presence, okay and that's it. Whatever you paste inside this,
it's okay, come inside this, come inside this tag. And inside this some two things have to be written
like mode ok now what is the mode which I He was saying that it is okay to get vetted now, then
we will get vetted done in the mode and its What will be the initial value, it will remain false,
okay, do it, make false, do this and
now see. Pay Ko Kiya Rid Okay come back this d
Kiya and Bum Guys look at this see one thing Read it now, look like I will click,
okay after some time it came. Why is it okay after, because look this thing
is coming, it means now what is being performed. Our butt is not visible,
actually is not visible because we The color has not been defined yet, it
was defined, it means it is not green there, so it is ok. Now look where it went, it came on this, like
clicked on it, see after some time it is c
oming. It means the performance is happening there but
the color is not coming. Let's define the color. If you give then how to define the color,
how to define the color, remove it from here That's why I was giving the class name. That's why I
was giving the class name. Okay, write it here. Let's say color property, take anything, okay
let's create one with the name color prop and Look, we haven't created any more CSS for this,
so let's do one thing which is the main CSS. Our text comes inside t
his and
what we will do is add it last and Its background color will be
green, ok, now look at it. Read ok ok he came back he has not come yet
brother tell me why he is not coming now Look, there is nothing to worry about now,
look at what is actually happening. It's a thing, look, it is being performed, you just
can't see it, will you show us how? Simple, come here, give it a position, it's okay,
what position should you make? It's absolutely okay. Make it absolute and give it zero from the top
,
it's okay, give it zero from the top and also from the left. Give it zero, okay,
give it zero everywhere, top, left, right, bottom, okay. Right is also given zero from the right and
zero is also given from the bottom and its root It has an index, what do we
have to do, we have to bring it up like we have given it. Okay, now I read it, I am coming back,
okay, I clicked on it, I saw the magic. What happened in reality or what
was being performed, what was happening behind it? What we had to do w
as position it as absolute
and increase its Z index. Had to do it, okay, so now look like
you are clicking on this, this is what happened, okay if you want. So you can change its color here and
customize it as you like. Okay, you can make it like this, we
will back the color now, we will click on it, it will look blue. Blue animation is visible, okay, so this
is the gallery view in which you can see images etc. Also add it category wise, this
is the main thing, our animation is right on this. Cl
ick here to see the animation. If you want,
let's make a back to home one here. The URL is ok, come here, put the bar tag,
import the link tag here, ok and Here, give two slashes and
delete it and write back to home, okay. Is this a page relo, now shorten
the page a little, it will look better, yes, it's ok. As soon as you click on this, you will get back to home.
Now see if you are clicking here. It is performing but when you
click on back to home it is not performing. Why because look at where
we had installed
this gallery, if anyone shifts from here It means that if someone goes
to another page by clicking on the link tag, then What will be the application of this motion dip? If
you want it to be applied in this also then it is simple. Do not delete this code from here,
it is okay to copy the code. Okay, now it's okay to copy and paste, otherwise there
is a problem. Okay, I get a lot of calls. Because there is no recharge from the pay company,
so it is okay, so see this here now. No
w if you click on it then this
error will come and see why the error will come because We have not imported the motion here.
Motion is not defined. Okay, so whatever. Import this here, these
two things above and import this here also. Okay, here also
we will have to create its instance. Will do it okay like this Now see this done
Clicked on back to home See this Boom and this Clicked on this, if you want,
change its color, you are going to back to home. Suppose we want to keep it red, let us
do
one thing, create a color with this name: color prop ray. Make it means make the class name,
my styling which means my CSS which is That's really bad ok so
no one go to my css no one go ok no one No, I made this thing and do one
thing, copy it from here and paste it. Make it more simple,
what will you change in its RGB, assume that I have to keep it like this, it's yellow, it's okay, now
look, it has gone green, that means it has gone into blue type now. Look, it is in yellow, okay, in this way
the animation which you want means the page which is direct. There used to be a redirect, now after removing that thing,
we have added an animation. Okay, someone likes it. Whenever we click on a link, it
gets animated like this and is saved on the other page. It will happen in this way, so you
create it in which type as I told you. It was shown in the intro that you can create it by adding images etc.,
okay, great. images And if you want to post this on social media
then definitely tag us @Gati
Coding. Ok and don't forget to add song, song is
most important, ok dot also and song. Okay, let's meet in the next video,
till then Tata bye bye tech. Care and good
night
Comments