React Page Transitions With Framer Motion + React Router v6 (2023)

Step up your React game with the coolest page transition tutorial of 2023! Learn to use Framer Motion and build a rock-solid navigation using React Router v6 to build smooth page transition animation!

Chapters:
0:00 Intro
1:08 Get Started
1:43 Create Components
2:49 Add Routing
4:24 Global Styling
4:49 Creating Transition with Framer
6:25 Incorporating Transition

Thanks for watching!

[harrnish]

Sorry for using CRA like a noob lmao. Built first plain react app from scratch after almost a year or so 💀

[rifat]

Please keep making videos with React. We want to learn more about React js and framer Motion .

[mistersir]

I have to give you props(no pun intended) for sublime music taste you have.

[itachiuchihareal]

Omg you don't know how I love this
Keep makaing like this project bro ❤❤❤

[MrAbbo]

Love your content. So underrated you deserve way more subs.

[WiseArts]

Awesome! Love the GSAP stuff, but definitely hoping to see more Framer too

[Ivan-Shyriaiev]

Solution for «….expected function/fragment but got JSX… something…..”

Home.jsx ->

—-

import Transition from “../Transition”

function Home(){
return(
//Home
)
}

const WrappedHome = Transition(Home)

export default WrappedHome

—-

And then just import it in <App> as import Home from “../Home”

5:55

[coffeemakir]

This video prompted me to try implementing on Gatsby 🎉 not going great lol used filename instead of page API and most tutorials are old but still a fun idea 👍

[SogMosee]

What about sliding left and right using back and forward buttons, how would you control which direction the page slides in/out based on which route the user is going to + where the user is coming from?

[AsifMM-pe]

Bro your GSAP STUFF are dope but need more framer motion stuff like this too, anyway loved this tutorial.

[code.design]

As stated before keep up the react videos!

[thomasapfelbacher]

nice stuff. please provide more framer motion tutorials.

[pedrayy]

great video mate, but a quick question, is there any workaround for pages that await api calls before loading? or for example animations for page->loading screen->page ?

[justmilo]

Bro, I need help, its showing only the slide-out animation. I mean, the screen does not stay in black for a moment and then shrink. Is there something new different??

[dovudyusufzoda]

daamn, in 6 minutes

keep it uuup maaan❤‍🔥❤‍🔥❤‍🔥❤‍🔥❤‍🔥❤‍🔥❤‍🔥❤‍🔥

[francocaporaletti]

this is awesome! we need more tutorial like this in React! what about react + gsap?

[iwayanadityasemaraputra]

Awesome, please make tutorial React Page Transitions with GSAP

[synava]

whats 0gComponent?? it throws error for me... am using typescript

[hellofromiqbal]

Thanks for the tutorial ♥
Anyway, what's the name of the background music? It's kinda cool

[jorgezozaya]

I wander if this can be used with Remix? Great and inspiring tut!