Dear god, Actually, this is what i am looking for this week. This is like stack navigation on the mobile phone. Before this video, i poured about 1-2 weeks for this stack navigation(previous page left behind and next route page will cover up). Until this afternoon, i have no choice but to move react-native or ionic for this page transition. But, i found your youtube, and about 30min later, i finally figured out and applied to my web. If your video open late or maybe next week, maybe i forgive up my nextjs project, and may be i moved to react-native and start from scratch. so, I am going to buy your courses right now. i really really appreciate your endeavor.
OMG! thank you for mentioning how finicky React is and the necessity of wrapping things in fractions/divs I was having issues with that and not knowing why for days.
If you're doing this on a normal React app, where do you put the tag? It doesn't seem to pick up on the mode=wait or exit styles if I wrap the tags with it, i.e: {routes.map((v, i) => )} And if It try to put it in the tags, wrapping the individual tags, I get a router error, i.e:
{routes.map((v, i) => )} The error I get is: Uncaught Error: [AnimatePresence] is not a component. All component children of must be a or Any help on this would be appreciated.
It does happen the same for me using vite, the slide happens but the previous page dissapear so I see the body color not the previous page color. Did you find out a solution?
@@seriouslee4119 keep in mind that soon nextjs 13 is coming and you will need to migrate it because it comes with huge changes. If you are doing an important project. Cheers
This was an awesome video! What makes the package "okay" in your eyes? That's all incredibly sleek and intuitive after watching the vid and reading the docs.
Hello Ed! Recently I bought your React and Redux course. Can I use React to create simple web pages? or Should I use a different framework to create a simple web page?
So I'm following along and I can't get past the navbar part... I have followed all the steps. however, the tailwind CSS isn't actually updating on my project. I just got done watching the other tutorial on how to build a react portfolio and set it up the same way as that project... still no css updates. Any ideas as to why? Edit: I've also included the @tailwinds in the global css file
thanks Ed, great video. anybody guys please do you know how we get all of a sudden 'router' in _app.js? Like what happened there that we have access to router?
I use framer motion for page transition, but I prefer GSAP for everything else. Sucks that I have to use two libraries, but as long as they don’t make it more simple to do page transitions, there aren’t many other options.
Is there a reason you use GSAP for everything else? I have been trying to decide if I should use GSAP or Framer Motion for my personal project and am having trouble deciding.
I am having some trouble with this. I can get upto the point that they transition in and out when you change page but as soon as i try and add the sliding effect it doesnt work, they just still fade out even though the scroll bar appears on the side. It will however slide up if i refresh the page i am on. Anyone?
I'm having a different issue. The bottom section on both pages ends up at the bottom with a background of white. For instance on the contact page ,the words "Find me:" and social media section are at the bottom of the page with a background color of white
Great tutorial. I learned a lot about page transitions and Next.js. However, I'm having some issues. The bottom section on both pages ends up at the bottom with a background of white. For instance on the contact page ,the words "Find me:" and social media section are at the bottom of the page with a background color of white. Can anybody help?
Dear god,
Actually, this is what i am looking for this week. This is like stack navigation on the mobile phone. Before this video, i poured about 1-2 weeks for this stack navigation(previous page left behind and next route page will cover up). Until this afternoon, i have no choice but to move react-native or ionic for this page transition. But, i found your youtube, and about 30min later, i finally figured out and applied to my web. If your video open late or maybe next week, maybe i forgive up my nextjs project, and may be i moved to react-native and start from scratch. so, I am going to buy your courses right now. i really really appreciate your endeavor.
OMG! thank you for mentioning how finicky React is and the necessity of wrapping things in fractions/divs I was having issues with that and not knowing why for days.
Make more videos about React with GSAP
Please I want more react project as all as Full stack using mongodb project 🥺🥺
yes we want more videos of React + GSAP
I just arrived at the point to press like before even starting the video. Love the way you teach and create content!
Whole video I waited for you to fix the type on the Navbar component. RIP "textx-2xl"
Thanks you for cool animations!
crazy ive been searching this all day yesterday and today lolol you read my mind man
man. I'm happy you're back and pushing out more videos like an erupting volcano. everything is hot!
i am very thankful for your contents,you deserves more
I love your content and you deserve all the support and more❤
Your Vibes and aura is always positive. Thanks for everything 😊
22:11 Your dog gave you the spirit to finish the tutorial quicker 😂😂
🔥This is Great! is nice to see Framer motion content from you!
He always sponsors himself :) Love you..Sir
Great Tutorial Helped me a lot! Thanks
Very good timing, thanks for this
nice impressions bro!
we need a dedicated framer-motion course Ed
Thanks, nice tutorial
If you're doing this on a normal React app, where do you put the tag?
It doesn't seem to pick up on the mode=wait or exit styles if I wrap the tags with it, i.e:
{routes.map((v, i) => )}
And if It try to put it in the tags, wrapping the individual tags, I get a router error, i.e:
{routes.map((v, i) => )}
The error I get is:
Uncaught Error: [AnimatePresence] is not a component. All component children of must be a or
Any help on this would be appreciated.
It does happen the same for me using vite, the slide happens but the previous page dissapear so I see the body color not the previous page color. Did you find out a solution?
@@davidgomez6823 sadly not. I ended up restarting my whole project in next.js to be able to follow along the tutorial.
@@seriouslee4119 keep in mind that soon nextjs 13 is coming and you will need to migrate it because it comes with huge changes. If you are doing an important project. Cheers
@@davidgomez6823 Yeah i started mine with vite too, thought it shouldn't make a difference, you figure out how to fix it in the end by any chance?
@@lol51329 No I dint find any way
Great tutorial 🔥
I love your teaching teacher 😍😍😍
This was an awesome video! What makes the package "okay" in your eyes? That's all incredibly sleek and intuitive after watching the vid and reading the docs.
Hello Ed! Recently I bought your React and Redux course. Can I use React to create simple web pages? or Should I use a different framework to create a simple web page?
a simple web page? just use regular javascript.. get good practice.
So I'm following along and I can't get past the navbar part...
I have followed all the steps. however, the tailwind CSS isn't actually updating on my project. I just got done watching the other tutorial on how to build a react portfolio and set it up the same way as that project... still no css updates. Any ideas as to why?
Edit: I've also included the @tailwinds in the global css file
Thank you for the tutorial :)
this is very helpfull
Op teaching sir 🔥, it would be great if you make a more videos on this :)
Wow lovely. Thank you so much
People train their biceps and get a bicep vein, my man trained his mind so much that he got a mind vein
Nuxt and/or solid need your type design love!
4:30 It's called fragments 😬
thanks Ed, great video. anybody guys please do you know how we get all of a sudden 'router' in _app.js? Like what happened there that we have access to router?
Is it possible to add different transition depending on the page you are navigating from.
damn that dog comment is made me laugh really hard 🤣🤣
What does the text - base class do?
Can anybody help? If I don't use mode={"wait"}, it won't do both at the same time. It'll just render the exit transition but not the initial.
what is the gzipped thing in your imports?
Thanks buddy!
I use framer motion for page transition, but I prefer GSAP for everything else. Sucks that I have to use two libraries, but as long as they don’t make it more simple to do page transitions, there aren’t many other options.
Is there a reason you use GSAP for everything else? I have been trying to decide if I should use GSAP or Framer Motion for my personal project and am having trouble deciding.
@@dhaloh I don't want to wrap divs and GSAP have cool plugins that Framer Motion doesn't have
@@filipevalentegomes2383 Ohh alright. Thanks for sharing!
My brother, one question, can it also be done with Qwik?
Happy diwali to all🎉
What’s your VS Code theme?
I am having some trouble with this. I can get upto the point that they transition in and out when you change page but as soon as i try and add the sliding effect it doesnt work, they just still fade out even though the scroll bar appears on the side. It will however slide up if i refresh the page i am on.
Anyone?
When I have tried this method, the div resizes existing elements on the page. Is anyone else having this issue? I am using Next with Chakra UI
I'm having a different issue. The bottom section on both pages ends up at the bottom with a background of white. For instance on the contact page ,the words "Find me:" and social media section are at the bottom of the page with a background color of white
Great tutorial. I learned a lot about page transitions and Next.js. However, I'm having some issues. The bottom section on both pages ends up at the bottom with a background of white. For instance on the contact page ,the words "Find me:" and social media section are at the bottom of the page with a background color of white. Can anybody help?
Are u using a div for the bottom section?
@@ADizz2000 ?I did and got the same issue anyway to debug that
@@kewellkibet3596 are u using the root layout file
can you implement framer motion in a regular react app without next.js?
Questions can come in⬆️⬆️...
overflow hidden doesn't work for me, could this possible be because my items position is absolute?
Questions can come in⬆️⬆️...
Awesome mahn🚀🚀
Oh so. This is nextJs, not pure create react app, is that right?
Hey ed, you should make section observer animation using framer motion video
Ed can u also add timestaps for future vedios. thanks
thanks for the tutorial
Hi dear, can I upload your video in my own channel giving credit to you?
tried to follow the same steps but without using next js and it's not working properly at all
What is your theme
Hey sir , does Web developer (full stck)? need knowledge about DSA?
What's the name of your vscode theme please?
community material theme ocean high contrast
Who else noticed that the header textx-size was a mistake throughout the whole video? 😁👍
Thanks!
Just pressing Like, sure it will be awesome 🙂
awesome
I'm watching this at 2x and your voice is still slow xD
Omg...Ed is turning gay in front of our eyes....just kidding nice tutorial as usual.
Helo
Gsap is better
Y you look so aggressive, calm down!