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.
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.
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.
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
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
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?
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.
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 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?
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
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.
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.
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
we need a dedicated framer-motion course Ed
22:11 Your dog gave you the spirit to finish the tutorial quicker 😂😂
I just arrived at the point to press like before even starting the video. Love the way you teach and create content!
man. I'm happy you're back and pushing out more videos like an erupting volcano. everything is hot!
Your Vibes and aura is always positive. Thanks for everything 😊
i am very thankful for your contents,you deserves more
🔥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
Nuxt and/or solid need your type design love!
Thanks, nice tutorial
I love your content and you deserve all the support and more❤
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.
nice impressions bro!
People train their biceps and get a bicep vein, my man trained his mind so much that he got a mind vein
Very good timing, thanks for this
Op teaching sir 🔥, it would be great if you make a more videos on this :)
Happy diwali to all🎉
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
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
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.
I love your teaching teacher 😍😍😍
Thank you for the tutorial :)
this is very helpfull
Great tutorial 🔥
Is it possible to add different transition depending on the page you are navigating from.
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!
Wow lovely. Thank you so much
My brother, one question, can it also be done with Qwik?
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?
Thanks buddy!
what is the gzipped thing in your imports?
What does the text - base class do?
4:30 It's called fragments 😬
Ed can u also add timestaps for future vedios. thanks
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.
Who else noticed that the header textx-size was a mistake throughout the whole video? 😁👍
Hey ed, you should make section observer animation using framer motion video
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?
Hi dear, can I upload your video in my own channel giving credit to you?
thanks for the tutorial
can you implement framer motion in a regular react app without next.js?
Questions can come in⬆️⬆️...
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
tried to follow the same steps but without using next js and it's not working properly at all
Oh so. This is nextJs, not pure create react app, is that right?
What is your theme
overflow hidden doesn't work for me, could this possible be because my items position is absolute?
Questions can come in⬆️⬆️...
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
damn that dog comment is made me laugh really hard 🤣🤣
Thanks!
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
Awesome mahn🚀🚀
awesome
Just pressing Like, sure it will be awesome 🙂
Gsap is better
I'm watching this at 2x and your voice is still slow xD
Helo
Omg...Ed is turning gay in front of our eyes....just kidding nice tutorial as usual.
Y you look so aggressive, calm down!