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

what's up everyone prepare to be blown away by the most incredible react page transition tutorial ever witnessed on YouTube surpassing anything you've seen to this very day in a departure from our green sock Adventures we're venturing into the realm of framer motion the Beloved choice of countless developers working with react waste no time as I take you through each and every step unlocking the secret to crafting sick page transitions you see on almost every Awards website let's dive right into it thank you [Music] alright let me give you a rundown of the plan we'll start from scratch using Create react app once that's set up we'll quickly create the necessary components home about contact and navbar from there we'll dive straight into routing using the latest version available after setting up the routing our next step will be to add some Global styling to enhance the overall Aesthetics with everything in place we'll create a stunning frame or motion component for our transitions finally we'll seamlessly integrate the transitions into our app that's the plan simple and straightforward so without further Ado let's get started and build it together let's begin with the first step creating a fresh project using Create react app once you've successfully set up your project it's time to get things rolling start the server using npm start [Music] foreign folder and remove all the CSS from app.css we also wouldn't need any boilerplate code we are all set now to start creating the pages but before that let's just install react router Dom as we will need it later while incorporating routing [Music] for the pages create a new folder called components inside SRC inside components we will add four files home.js about.jscontact.js and navboard.js go to home and turn it into a boring functional component we only need a heading inside it same for about in contact pages 2. for the navbar the first step is to import the link from react router Dom which we will use to create anchor elements in our navbar let's have a container with the class name nav we would have two siblings for the nav one for the logo and the other one for the links the logo is going to be a link that points to the index page let's also add the navigation links we'll wrap each link in a div element with the class name nav item inside we'll use the link component to create the actual link specifying the destination path using two prop in our current setup if you check app.js you'll notice that nothing is happening on the page that's because we haven't injected anything into it just yet to get things rolling let's head over to index.js the goal is to wrap our entire app with browser router which will enable us to handle routing within our application the first step is to import browser router routes and route from react router Dom let's wrap the app component with router and then routes within the routes we have a single route this specifies a wildcard path that matches any URL the element app attribute specifies the component to be rendered when the route is matched this means that now whenever a user navigates to any path the app component will be rendered this allows us to have a single entry point for our application and render the app component regardless of the URL to enable us to handle routing within our app let's go to app.js and complete the final step of the configuration we import the routes route and use location from react router Dom we also import the components nav bar home about and contact from their effective files we start by using the use location hook to get the current location of our app this location will be used in the routing configuration within the return statement first we render the navbar component the location attribute sets the current location for the routes by setting the key to the current path it helps in properly re-rendering the route's component when the URL changes it is the necessary step for the routing system to work correctly by specifying the current location and the key for proper re-rendering inside the routes we Define our route configurations the index attribute in the first route represents the Home Route and specifies that the home component should be rendered when the route is matched similarly we have routes for about in contact that render the respective components and that's it the pages look pretty boring let's add some common styling for the nav and headers I am going to fast forward this part a bit since you already know what we will be doing I am just styling the nav using flexbox adding some generic styles to H1 and anchor tax that's it you can anytime get access to source code with the pro membership for dollar 349 a month anyway let's move to the next phase creating the transition using framework motion let's proceed with installing framer motion to our package dependencies once the insta installation is complete we'll create a new file within the SRC directory name transition.js this file will serve as a dedicated space for managing our transitions first we import the necessary motion component from frame or motion then we Define the transition function which takes in a component as a parameter inside the return we first render the component itself using to ensures that the original content is display next we utilize two motion components to create the animation effect the first motion div has the class name slide and is responsible for animating the transition when a new component enters it starts from a scale y value of 0 grows to a full-scale y value of 1 during the animation and is controlled by the specified transition properties similarly the second motion development with the class name slide out handles the animation when a component is exiting it starts at a full scale y value of one shrinks to zero during the animation and again follows the specified transition properties thus the transition function returns to implement this in your application you would import the transition function and use it to wrap the components that you want to have animated transitions so we will go to each page import the transition and use it to wrap the components inside it let's style the transition overlay real quick for the slide and animation the overlay is fixed to the top left of the viewport with a full width and full height dark background don't forget to set the transform origin to bottom as we are scaling it up from bottom the slide out transition will also have same Styles except the transform origin set to top as we will be scaling it down from top that's it but hang on there is one final step to make it work in sync with the routing head over to app.js and import animate presence from framer motion wrap the entire app with animate presents and set the mode as weight we are done let's check it out [Music] foreign [Music]

Channel: Codegrid

Views: 58,928

Keywords: react page transitions, react page transition animation, react page transitions with framer motion, react page transition gsap, react page transition library, react page transitions example, react page transition effect, react native page transition animation, framer motion react, framer motion tutorial, framer motion page transitions, framer motion animation, page transition react, page transition nextjs, page transition react framer motion, page transition framer motion nextjs

Id: 8voRA_DMuFM

Length: 6min 50sec (410 seconds)

Published: Wed Jun 21 2023