NOTE: In the code, I made a mistake where I wrote "intial" instad of "initial" as a prop to the motion.div element. Sorry about that :/ Also, idk why it worked either way hahaha but its better to change it
@pandipatipavan3804
2 жыл бұрын
Please share the link for the source code and which editor did you used? How to use it please explain in details or setup by making a video on it. Really awesome and super. Thank You so much 🙏
@alexforw5545
2 жыл бұрын
Hahaha, I don't know English very well and this thing makes me go to google translater and 'intial' was translated really the same as 'initial', so I start thinking that it's the same word. Thank you for saying that it was mistake! Also thanks for this cool video!
@bahadrcolak27
2 жыл бұрын
I was thinking of this mistake whole video Now I can watch again :)
@JVLIAH
2 жыл бұрын
so your scrollbar doesnt go down. hope it helps! nice tutorial
@michealdalu8620
2 жыл бұрын
lol, the one rule, if it works, don't touch it
@KyleKatarn145
2 жыл бұрын
Thanks for the helpful tutorial. I'm only just starting to look into Framer Motion as it's quite interesting, but one thing I don't really like about it is how it sort of requires you to entirely restructure your code to use it.
@emiljano1733
2 жыл бұрын
the best react channel in youtube
@PedroTechnologies
2 жыл бұрын
I appreciate that!
@rss-bn2ub
9 ай бұрын
if you're following along try adding mode='wait' which will make animations wait for the previous animations to finish. do this in AnimatedRoutes like so:
@rss-bn2ub
9 ай бұрын
apparently this replaced exitBeforeEnter
@jonathancohen7196
8 ай бұрын
This is everything for this to look nice! Thank you!
@TuringTested01
2 жыл бұрын
your channel is extremely underrated, you keep everything upto date
@juanramos5689
2 жыл бұрын
man i was just searching for a way to use framer motion for page transitions. Thanks Pedro!
@aymofficial
2 жыл бұрын
i was searching for this yesterday and wondered when someone shows this with react router v6 xD
@abrarahmed6935
2 жыл бұрын
Want detailed video of Framer Motion Please .. 🙏♥️
@germansoto7107
6 ай бұрын
Loved your video, there many around but yours worked like a charm, i am very exited about what is possible with Framer!
@warrenpeterson5709
4 ай бұрын
I think u just solved my 8 hours of trial and error. Thank u 🎉
@ubaig54
2 жыл бұрын
Thank you very much brother, you literally covered all the problems anyone could face.
@vibhavkushwaha5809
2 жыл бұрын
thanks buddy, this literally helped me. I was stuck for almost 2 years now for this thing. But now its working for me
@aris13pat1
2 жыл бұрын
Nice video with simple animations. Nice library too. Very underrated channel. Thanks so much.
@arnavsinghal9662
4 ай бұрын
i was struggling with this for 2 days. ty!
@ludovicbenoit4293
2 жыл бұрын
Again, best tuto about React, you're a genius man
@jeff1571
2 жыл бұрын
Heey Pedro! Can you make a tutorial with Mantine, like how to style their components? Btw thanks for this, I've been eyeing Framer for months just to make my website look cool and professional. This is a good sign
@mengineer4547
2 жыл бұрын
Hi Pedro, as a regular viewer I have learned so much from your videos. Could please make a video regarding MVC Pattern. I trying to learn more regarding MVC pattern after listening to your suggestion in your previous video. However, there isn't really a comprehensive tutorial regarding this topic. I would grateful if you could create a video on MVC patterns and how it relates to React.js. Please keep up the great work and I wish all the success in this world.
@coldym
2 жыл бұрын
I agree, i'd like to see design pattern on react too
@PedroTechnologies
2 жыл бұрын
Hey thank you for watching my videos :) I do have a video on MVC: kzitem.info/news/bejne/w4erqKCIaYZmlpg The MVC pattern is more commonly used for backend, but its principles can for sure be applied in a react app
@mengineer4547
2 жыл бұрын
@@PedroTechnologies Thank you Pedro I definitely check out the video.
@hugoadrianmejiasoteno3469
Жыл бұрын
Amazing man, i thought it doesnt work now, but i did it and it works great, thank you very much. I hope you continue uploading videos about react and libraries.
@justin9494
Жыл бұрын
Thank you! Chatgpt couldn't do this so I went here.
@justhooman4682
2 жыл бұрын
great video,dude!. content on framer motion is kinda scarce,so,hoping you would create more content like this!
@calvinwilliams729
Жыл бұрын
React Router 6.6.3 how do we pass useLocation? it now uses createBrowerRouter
@joemartens7864
Жыл бұрын
hahah i genuinelly laughed when it did not work at 12:40. Nice video, thanks for it!
@ThColinPereira
2 жыл бұрын
This was super helpful!
@jeffnishihira6209
3 ай бұрын
A very helpful tutorial. Thank you!
@meobeo7094
2 жыл бұрын
Nice library and beautiful animation, but one question pop up in my head is that "Can you make it without put on every components ? How is this possible to use if you have lots of components ?"
@mehdifl5120
2 жыл бұрын
just put it on a HOC component
@SvetaSveta-ms4hi
2 жыл бұрын
It's incredible! Thanks a bunch! 🙏
@eliuddyn
2 жыл бұрын
This is amazing. Thanks bro! 🔥🔥
@PedroTechnologies
2 жыл бұрын
Glad you like it!
@haiderjaafer8164
2 жыл бұрын
Great work keep going forward... Please make more tutoriats on animation
@jooooo9572
2 жыл бұрын
Damn thats fun!
@inspirationonline353
Жыл бұрын
I love the details mate
@aiwinraj3735
6 ай бұрын
You are a lifesaver sir
@ianpatricck
2 жыл бұрын
Greetings from Brazil Pedro 👻
@PedroTechnologies
2 жыл бұрын
I am from Brazil too :)
@kums7755
2 жыл бұрын
Hi Pedro, can you do more content on cloning big apps such as Whatsapp, Amazon etc...
@windmaomao
2 жыл бұрын
Thanks for the video. The tricky thing is that Framer always expect one item to die before the new item appear. This is why it's causing the transition delay in your video as well. The best way i can think of is that these two items needs to be in memory already before the transition starts.
@MrBrandenS
2 жыл бұрын
Framer has a property called exitBeforeEnter that you add to AnimatePrescence that allows it to finish out one exit animation of a component before moving onto the next component's animation. While it won't solve all animations that need two components in memory as you stated, it does allow for a nicer transition between components.
@andriellepessanha90
Жыл бұрын
AMIGO VOCÊ É UM AMIGO CARA NAMORALZINHA VOCÊ MERECE O MUNDO, MUITO OBRIGADO MEU CONSAGRADO!!!! THANK YOU SO MUCH!!!!!
@oleksandrmykhailov2668
2 жыл бұрын
great., another great tutorial from you Pedro! Keep holding that high level of your tutorials, really enjoying them a lot!
@myroslavkozar2230
2 жыл бұрын
again you are the best
@AlesaGillespie
2 жыл бұрын
Exactly what I wanted.
@swapnilcodes
2 жыл бұрын
Wow...Nice video... Please make a video on React Authentication with Redux Toolkit with JSON server or With Node.js backend...If you already Have made a video on that then plz give me a link...i am not sure if we successfully logged in then how to keep user logged in using redux toolkit...I am sure lot of people are waiting for this video...btw thanks for this one...🥰 Keep uploading new stuff sir...😊😊
@KM-zd6dq
2 жыл бұрын
If your next page start doing the animation before the current page is still animting, do this on your AnmiatedRoutes.js
@code-with-me
2 жыл бұрын
Great video man!!! Thanks a lot
@hesam-init
2 жыл бұрын
hey dude thank a lot for this nice content , i have a idea for beautiful exit animation : add exitBeforeEnter to AnimatePresence element
@mohamedeljbel
2 жыл бұрын
I've been playing on garageband for a couple weeks and just got the trial of softs. I was worried there wouldn't be any clear tutorials, but
@hiimdjango
2 жыл бұрын
The problem is the initial animation isn't triggering, I tried this approach, unless you make the animation super fast that you don't even notice.. Maybe I'm not able to make it work? but I'm doing the exact same thing as you (using INITIAL of couse)
@aizazahmed1637
Жыл бұрын
did you find any solution ?
@ignjat4123
2 жыл бұрын
thanks a lot brother, a very helpful tutorial
@johnkrator
2 жыл бұрын
This was really helpful
@helldudes5924
Ай бұрын
Man you rock !!
@Xtopherization
2 жыл бұрын
great the tutorial! helped me a lot !
@elkhanhamet2561
Жыл бұрын
thank you Pedro😊👍👍👍
@nathankoehler5076
Жыл бұрын
A godsend, keep it up
@RealEstate3D
2 жыл бұрын
Is it a taboo to say that the motion.div’s attribute should be called “initial” instead of “intial”?
@g43s
2 жыл бұрын
is it possible to have a config file? that way i avoid editing each page file everytime i want to make a small change?
@muaz-memis
2 жыл бұрын
Can you share the repo link? I couldnt find it :) By the way, thanks for everything. You have gained a new follower. From Turkey :)
@simranbanwait
2 жыл бұрын
Thanks bro , great video
@sahllsaharn4664
Жыл бұрын
You saved me 2nd time thanks
@johnpaulpineda2476
2 жыл бұрын
Hello Pedro can you make image carousel with highlights as well?
@jaybanks7718
2 жыл бұрын
I tried this over the weekend. The only way to install framer-motion was using --legacy-peer-deps, because the latest React is too new. Everything worked until I dropped in the tags. It crapped out at that point, at least for me.
@rogi9696
2 жыл бұрын
Good animation, bro. But actually you are not using the 'initial' prop from motion, it is misspelled. Thx for the tips btw :)
@PedroTechnologies
2 жыл бұрын
Yes, you are right! I pinned a comment above, idk why it still worked hahaha
@juanluisglez2251
2 ай бұрын
Hi, I have an issue that I cannot resolve: the animation occurs in reverse. If I want the same fade animation you made, I have to do this: initial={{opacity: 1}} motion={{opacity: 0}} exit={{opacity: 0}} and I don't know why. Could you help me, please?
@mrebrahimxd
Жыл бұрын
note : add *mode="wait"* inside the AnimatePresence component if you're facing a weird jump off animation ...
@EpicKeyz
Жыл бұрын
Thanks! That is what I looked for
@mrebrahimxd
Жыл бұрын
@@EpicKeyz :D !, I will ask for help too in any time hope you're welcoming me!
@devbrn
Жыл бұрын
Excellent video congratulations, in my case, passing the location.path as a key in the Routes was duplicating my component when I returned to the page with the navigation menu. My solution was to remove the key from the Routes.
@rmt0858
2 жыл бұрын
Make morr such videos on react
@alt404s
2 жыл бұрын
Great video !
@leoMC4384
Жыл бұрын
Great tutorial. It doesn't work on my project though. The animation is messed up. I did the opacity transition you did here but my components flash on the left side on the screen, then the next component flashes on the right side and then shows up in the middle. It should've fade out and fade in the middle. I tried different ways to animate between components in my page, nothing works. Maybe it's because there's a lot of CSS for styling my components already. It's driving me nut, I hate this shit. I'll just leave it without transtions. This is why I love backend development.
@sameershahbaz8821
2 жыл бұрын
You didn't create the exact animation that has shown in the beginning...please show that one.
@shahinovic7828
Жыл бұрын
thank you bro
@tj-softwaresolution
2 жыл бұрын
really helpfull, thank you 🙂
@EminoMeneko
2 жыл бұрын
I don't know if I am having the bug or the lib need some special fiddling. The content of the page to appear just appear immediately so for the time of the transition I have 2 contents...
@YaHoo4598
2 жыл бұрын
Set the exitBeforeEnter attribute on AnimatePresence.
@kecoma
2 жыл бұрын
Amazing video
@adil8132
2 жыл бұрын
Thank you!
@onlynowmotivation
2 жыл бұрын
Thank you very much!!!
@mariummagdy4359
Жыл бұрын
Thank you 🫡
@Joseph-do9ue
Жыл бұрын
Hi Pedro, thanks for amazing tuts, Just want what i sthe extention name that tell the size for tha packages you imported?
@justin9494
Жыл бұрын
In the example you showed, it only fades out and does not fade in. Please help how to do it.
@joseguilherme6447
2 жыл бұрын
Such an amazing content! Are you brazilian?! ;D
@herbertk9266
2 жыл бұрын
Thank you
@Hari-jj4mn
Жыл бұрын
thx and subscribed
@xman3666
Жыл бұрын
what about the react router dom v6.4? how to set up using RouterProvider component from react router dom. ?
@user-if8rh6sf2m
2 жыл бұрын
I downloaded much cracks, but it is the best!
@alejandrogabrielcorzo3694
Жыл бұрын
Hi bro! Nice video! i'm a full stack developer in progress and maybe this is basic but i would like to ask you if there's any difference between using yarn install or npm install! thanks!!!
@abhinavkumar5613
2 жыл бұрын
Hey please can you let us know which extension are you using for gzipped display in VSCode?
@prasadaguru
2 жыл бұрын
how to apply this to the scroll effect bro... can you make an video on it???
@jordan_777.
Жыл бұрын
Wouldn't an easier way to do this just be to wrap the parent component of App.js with the Router component? Saving having to move around all that code?
@aymenbachiri-yh2hd
3 ай бұрын
THank You
@ruuman4
Жыл бұрын
How did you do that wiggle at the end of the animation? Where the page rebounds
@prakashraj4519
Жыл бұрын
cant we make animations directly using css, without using libraries?
@kapil4457
Жыл бұрын
Can you also make one for fade out animation.
@kaiqueferreira2206
2 жыл бұрын
curti muito o vídeo mano, só fui perceber que era brasileiro quando abriu o terminal kkkk
@satyamchaudhary9521
2 жыл бұрын
detailed video of framer
@PedroTechnologies
2 жыл бұрын
Coming soon :)
@ericdemelo
Жыл бұрын
Obrigado, amigo =)
@NOTHING-en2ue
Жыл бұрын
what if the library stop working for some reason ?
@electronpicante2520
8 ай бұрын
Que bien hablas ingles, pude entender casi todo
@danieltkach2330
2 жыл бұрын
What about just placing the BrowserRouter inside the main.js or index.js? I do that, instead of creating a new component to wrap the routes.
@johng4014
Жыл бұрын
i think because the useLocation hook needs to be declared inside BrowserRouter otherwise you will have an error
@Abirzy
7 ай бұрын
It doesnt work for me, The initial animation works but the exiting animation doesnt
@miroslavmanovic1761
Жыл бұрын
How can we add animation only for one specific route?
@constantasg1472
Жыл бұрын
exit transition do not work for me
@niklausmikaelson7332
2 жыл бұрын
Can we do it on condition randering of components
@rianhidayat5379
Жыл бұрын
I have some problem, i do the same step but my path didnt work but the animation going very2 well. The my page stuck on homepage, someone can explain?
@drekforder2952
2 жыл бұрын
why in the world can I not add a duration of the "initial"?
@Javicavalli
Жыл бұрын
How would you add the navbar so that it also has the fade animation?
Пікірлер: 169