NextJS Page Animation Transitions with GSAP

changing from page to page on websites can get a little boring sometimes you may want to add a nice animation that smoothly transitions into the next page well in this video we'll be doing just that we'll be applying the Gap animation library to a nextjs application so that when a user clicks onto another page a nice ribbony effect will take place this tutorial should set you up so that you can either use this exact effect on your own site or play around with it so that you get something that you want now before we continue I just want to let you folks know about a job board that am building for the community which shows web developer roles along with their salaries this is updated on a weekly basis and there is a newsletter which you can also sign up to so that you get the jobs sent straight into your inbox if this interests you you can check out webdev jobs.io so to start with let's go ahead and set up our nextjs application in the directory of your choosing run MPX create next app at latest for the project name I'm going to go with gsap next page transitions then yes to typescript es lint Tailwind CSS Source directory app router and no for import Alias as I'm already a fan of the default once installed we can jump into the project and install Gap so that's the installations out of the way we can now begin to code the first thing that we're going to do is get rid of the extra CSS that nextjs provides Us in the global. CSS file leaving only the top three Tailwind lines then inside of the page. TSX file we can get rid of everything and create a simple page where we just return a section and a H1 tag that says welcome inside of the H1 tag we can add the classes text size 7 XL font extra bold text Center and a margin top of 10 then finally export default homepage at the bottom back in the terminal if we run mpm run Dev in the browser we should see a simple welcome page nothing special but we're getting there we then need to create a file called template. TSX wait why do we need this now our template is similar to our layouts. TSX file in that it wraps each child layout or page however unlike layouts which persist across routes and maintain States templates create a new instance for each of their children on navigation meaning that it is going to render our component every time instead of using the cache version of that specific page another thing to note is that the template component is rendered inside of the layout component anyway this will just allow us to run our animations so let's go ahead and use it at the top we need to State use client don't worry you can still render server components within it then export default function template which will have the propo children which will be a react node type we can then return a div and within that we can add another one with an ID set to Banner one with the classes minimum height screen background color of neutral 950 a z index of 10 fixed position top zero and left zero with a width set to one qu we can then copy and paste this three times underneath and then change the ID so that we have Banner 2 and left one quarter for the second one then Banner 3 and left 2 over 4 for the third and finally Banner 4 and left 3 over4 underneath the the last div we can throw in the children prop now if we head back to the browser we should see it covered with a dark screen however if we open the elements tab you'll see that we have four divs with the banner IDs let's head back to the code so that we can animate them we can start by creating a utils directory inside of the slrc folder and within it an animations. TSS file this is where our animations will live to start with we need to import Gap from Gap and then export a function called animate page in within that we can fetch our banners for Banner one we can use document. getet Elements by ID and then pass in Banner one we can copy and paste this three times underneath and replace the values so Banner 2 Banner 3 and banner 4 then we can say if Banner 1 2 3 and 4 exist create a gap timeline and assign it to the variable TL we first need to set the initial positions we can do this by passing in an array to TL do set which contains banners 1 to 4 and then for the second argument an object where the y% is set to zero we can then call Dot 2 and pass in the same array then for the object we can set y% to be 100 and set stagger to be 0.2 we need the Stagger property as we want each Banner to animate one after the other then back inside of the template file we can add a use effect which has automatically been imported for me and then within it call the animate in function at the end of the use effect be sure to add an empty array if we go back to the browser and hit reload we should see our four columns come down one after the other now it's time to add some pages that it animates as we switch from page to page first let's create an about page inside of app create a directory called about and inside of it a page. TSX file we can just throw something simple in here I leave it to you to jam it up a H1 tag that says about with the classes Tex 7 XL font extra bold text Center and a margin top of 10 then export Default about page we can copy this and inside of the app directory create a new page for work paste in the about page and then just change the values so that we have the component name as work page and the title as work remember to also change the export default now when we change from one page to another via the URL we can see the animation play out but this animation is only for when we go to a new page on the other hand we also want it to First cover the screen as we change to a different page for this we need the page out animation function inside of the animations. TS file we can import app instance from this long ass import statement this is just used as a type then we can create another export function called animate page out which takes in a href as a string and a router which is of the type app instance we can copy the body of the animate page in function and paste it within our newly created animate page out one we just need to change a few things in the set call change the y% to be minus 100 and then for the two function we can change the y% to be zero and also add in an uncomplete function which will just push the href onto the router this basically means that once the animation is complete the user will be moved over to the page they selected we then just need to use this function somewhere so let's create a directory called components and add a component in inside it called transition Link at the top we can State use client and then import use path name and use router from next navigation as well as animate page out from our animations file underneath we can create our transition link component and then Define the props as an interface where we will have the href as a string and label as a string we can then add the props into the components and in the body of it assign router to use router hook path name to the use path name hook we will need a function called handle click that will check to see if the current path name is not the same as a hre as we don't want the animation to run if the user is on the same page if the path name and href are not the same then we can call the animate page out function then we can return a button which will hold the label prop with the classes text XEL text neutral 900 and for hover a text neutral of 700 finally we can export default the transition link the transition link needs to belong somewhere too and what better place than a navigation bar so for our final component let's create a file called navigation. TSX within the component's directory we can start by importing transition link and then defining our component this will return a nav tag that will have the classes width fall Flex Flex Row Place item Center and justify between then a H1 tag holding a heading with the classes text 3XL tracking tight font bold and text neutral 900 underneath the H1 tag we can add a div with a class names flex and a gap of five and within it we can add the transition links for the first one we can have home with just a forward slash then one for work and about don't forget to then export the component now that we have the navigation done inside of the layout. TSX file we can add a main tag with the class names width of a half a margin X of Auto and a padding of one inside of it we can place a children prop and above that the navigation component if we head back to the browser we should now see that as we switch Pages we have our outro animation playing just before we enter the new page and if we click on the same page that we're on we don't get any animation playing which is what we want and there you have it you can now take this and make it your own and I definitely recommend playing around with the animation to get different outputs feel free to share your results in the Discord server which is linked in the description below otherwise stay healthy stay safe and I hope to see you in the next video

Channel: rithmic

Views: 5,008

Keywords: GSAP, ReactJS, Website Intro animation, website animation, reactjs with gsap, animating with gsap, software engineering, UI UX, UI / UX, user interface, user experience, GSAP with Tailwind, GSAP with React, React and Tailwind, Animations with NextJS, Page animations in NextJS, Page transitions in NextJS

Id: VnRC8PyzBT8

Length: 8min 12sec (492 seconds)

Published: Thu Mar 07 2024