Super Easy Page Transitions With React Tutorial

Check out my courses to become a PRO!
developedbyed.com/
In todays episode we will learn how to create really easy page transitions with react/nextjs and framer motion. We will style our website together with tailwind as well. If you ever wanted to add page transitions/animations to your react application, this is the easiest way I found to do it.
🎁Support me on Patreon for exclusive episodes, discord and more!
/ dev_ed
🛴 Follow me on:
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/developedbyed/
#programming #react

[@worldbest3097]

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.

[@TheConqueror253]

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.

[@paolospinelli6348]

I just arrived at the point to press like before even starting the video. Love the way you teach and create content!

[@sagarkhadka2450]

Make more videos about React with GSAP

[@swarnavopramanik1701]

Please I want more react project as all as Full stack using mongodb project 🥺🥺

[@luffytaro11]

yes we want more videos of React + GSAP

[@chawkimbarki1055]

I love your content and you deserve all the support and more❤

[@trebaltek]

crazy ive been searching this all day yesterday and today lolol you read my mind man

[@nigusdibekulu5215]

i am very thankful for your contents,you deserves more

[@rogermiller5411]

man. I'm happy you're back and pushing out more videos like an erupting volcano. everything is hot!

[@alvarocastillocorrea2610]

🔥This is Great! is nice to see Framer motion content from you!

[@abdulrazaqharoon2733]

Very good timing, thanks for this

[@vinaypatil8009]

Your Vibes and aura is always positive. Thanks for everything 😊

[@falcon4359]

Great Tutorial Helped me a lot! Thanks

[@canberkyilmaz]

Whole video I waited for you to fix the type on the Navbar component. RIP "textx-2xl" Thanks you for cool animations!

[@dev-av2993]

Op teaching sir 🔥, it would be great if you make a more videos on this :)

[@Lazaerus]

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.

[@munnikhanam111]

Wow lovely. Thank you so much

[@ahsan_0007]

Great tutorial 🔥

[@wisdomMate]

Thanks, nice tutorial

[@lasindunuwanga5292]

nice impressions bro!

[@mdrezaulkarim4707]

He always sponsors himself :) Love you..Sir

[@bisbireto303]

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?

[@Mwtorres89]

a simple web page? just use regular javascript.. get good practice.

[@madvier_8336]

Thank you for the tutorial :) this is very helpfull

[@shortvideos7440]

I love your teaching teacher 😍😍😍

[@tomspatula616]

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?

[@hehimselfishim]

we need a dedicated framer-motion course Ed

[@ElSpoon]

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

[@MDHasanurRahman-ko6cq]

Thanks buddy!

[@mohammedfaris9196]

Awesome mahn🚀🚀

[@zacboyles1396]

Nuxt and/or solid need your type design love!

[@ahmadakhbarf7118]

thanks for the tutorial

[@erkikadhafi9155]

Hey ed, you should make section observer animation using framer motion video

[@itsscode]

Is it possible to add different transition depending on the page you are navigating from.

[@seriouslee4119]

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.

[@davidgomez6823]

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]

@@davidgomez6823 sadly not. I ended up restarting my whole project in next.js to be able to follow along the tutorial.

[@davidgomez6823]

@@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

[@lol51329]

@@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?

[@davidgomez6823]

@@lol51329 No I dint find any way

[@HarryUnderscore9]

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?

[@colommbiano]

My brother, one question, can it also be done with Qwik?

[@filipevalentegomes2383]

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.

[@dhaloh]

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.

[@filipevalentegomes2383]

@@dhaloh I don't want to wrap divs and GSAP have cool plugins that Framer Motion doesn't have

[@dhaloh]

@@filipevalentegomes2383 Ohh alright. Thanks for sharing!

[@adarsh-chakraborty]

Thanks!

[@roshinif]

What does the text - base class do?

[@gouravchouhan1790]

People train their biceps and get a bicep vein, my man trained his mind so much that he got a mind vein

[@soulriderist]

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?

[@ADizz2000]

Are u using a div for the bottom section?

[@kewellkibet3596]

@@ADizz2000 ?I did and got the same issue anyway to debug that

[@ADizz2000]

@@kewellkibet3596 are u using the root layout file

[@notappi3982]

Ed can u also add timestaps for future vedios. thanks

[@yourjhay]

what is the gzipped thing in your imports?

[@hannahb9195]

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

[@soulriderist]

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

[@kameerhosein5748]

What’s your VS Code theme?

[@LuciferAndi]

damn that dog comment is made me laugh really hard 🤣🤣

[@daanmatheeuwsen1508]

overflow hidden doesn't work for me, could this possible be because my items position is absolute?

[@Joshdevbox_my_Teleqram_id]

Questions can come in⬆️⬆️...

[@andresmalagon1]

can you implement framer motion in a regular react app without next.js?

[@Joshdevbox_my_Teleqram_id]

Questions can come in⬆️⬆️...

[@satputeabhishek7031]

Happy diwali to all🎉

[@bahaaaldeen9611]

awesome

[@BanjaraJ007]

Hey sir , does Web developer (full stck)? need knowledge about DSA?

[@luishenriqueandradepellizz680]

Oh so. This is nextJs, not pure create react app, is that right?

[@redfanush]

Hi dear, can I upload your video in my own channel giving credit to you?

[@roshinif]

What is your theme

[@czarscrib3680]

What's the name of your vscode theme please?

[@Mwtorres89]

community material theme ocean high contrast

[@coding8524]

4:30 It's called fragments 😬

[@zombiebr]

Just pressing Like, sure it will be awesome 🙂

[@prajwald36]

Helo

[@heabin3294]

[@vagglord3156]

I'm watching this at 2x and your voice is still slow xD

[@mosjunk7764]

Omg...Ed is turning gay in front of our eyes....just kidding nice tutorial as usual.

[@imjuszay1470]

Y you look so aggressive, calm down!