Create a Website Intro with ReactJS + GSAP in 10 Minutes

want to know how you can make slick website intros like [Music] this using only reactjs and GAP well in this video we're going to be doing just that I will of course be using Tailwind CSS you don't have to if you don't want to I'm just doing it so we don't have to bother writing vanilla CSS so to begin with let's go ahead and set up our reactjs project and I'm going to go ahead and use fight for this for the purposes of this tutorial we don't really care too much about typescript so I'm just going to to go ahead and select reactjs for this project and for the final installation we need to introduce the start of our show which is Gap now Gap have recently rebranded their website so documentation is even easier to read than it was before so definitely go and check that out we'll be using that to make our animations and make a really cool intro as we saw at the beginning of this video now for those of you who are following this video code for code then we have three installations done we have our Vite reactjs project we've installed Tailwind and we've also installed Gap now of course I'm not going to go through the whole Tailwind setup as it's fairly simple but I'll definitely leave the documentation in the description for those of you who want to have a look at it so we have the boilerplate code that comes with Vite initially I'm just going to go ahead and get rid of all of it and just start from scratch then I'm going to create our app component again and just render out a simple hello then once that's done let's go ahead and just run the application just to make sure everything is working smoothly and there you go we have our hello rendered onto our screen but that's not why you clicked on this video you clicked on this video because you want a nice slick intro animation to your website so let's go ahead and do that now so removing our nice little Hello Message let's go ahead and create a div and first of all we needed to take up the entire screen then we'll add a flex add a nice little gray background justify the center and place items in the center that way we have our text in the middle of the screen then the next thing we need to do is add in a H1 tag style it up a bit give it a nice size let's make it bold give it a nice little gray color so it contrasts well with the background and there we go I have one small issue and that's the font so let's go ahead and head over to Google fonts and find something that we like now personally I'm a huge fan of space grotesque so I'm just going to opt in for that but if you like anything else feel free to pick that as the implementation is the exact same so I'm going to go ahead and select the medium space grotesque and then I'm going to copy the link and add that to the index.html file in our react project once it's there all we need to do is extend our Tailwind to add this new font family in and then finally let's go ahead and use that font with our htag and see what it looks like now you may remember that our intro animation has this screen that swipes across display some text and then swipes away so let's go ahead and Implement The Styling for that as well as the content that we need so the first thing that we need to do is wrap all of this inside another div and we'll give that the class name of relative because what we want is a layer to be positioned on top of our welcome screen then within that let's go ahead and create another div and within that let's add three H1 tags now you can add as many as you want just as long as it looks good I guess so I'm going to go ahead and add three and say software engineer designer and freelancer then to the parent div of of our H1 tags let's go ahead and add some styling to it so of course we want it to cover the entire screen let's give it a bit of padding a nice grayish background something that isn't white so it doesn't you know blind us then we'll make it absolute because we want it on top and we'll add a top zero a left zero and of course we want to use the font that we installed give it a zed index of 10 because we want it to be the top layer so the layer above our welcome screen we also want the width to be full so it covers everything and we will say flex and a flex column just so our H1 tags are stacked vertically give them a nice gap of say 10 and make the tracking tight so we can kind of keep our letters a bit closer to each other then for our titles let's just give them a nice big size so they show up well on our screen now if we go back to the browser and check out what we have we have our software engineer designer and freelancer titles which are going going to appear when our website initially loads but now it's really time to animate all of this now the first thing we need to do is make the necessary Imports so we'll be using two hooks from react use layout effect and use ref and then of course we need the Gap Library we can then use the used ref hook to create a reference for the root level element and we'll need this for scoping the use layout effect Hook is very similar to the use effect hook however unlike the use effect hook the the way this one works is that it fires after all the do mutations have been done now the effect function that's passed into use layout effect will run once after the component mounts and then once again once it unmounts due to the empty dependency array within the effect a gap context is created the purpose of creating this context is to record all Gap animations that are set up during the context execution this allows for easy cleanup later on Gap context takes in a function and an optional scope element here the scope is the comp ref which we created earlier by setting the scope this ensures that all the animations that we create will only be affecting the children of the component referred to by comp the last line of our function has a return When the effect function is about to be unmounted or cleaned up it reverts the animations set up by the GP context this is a way to ensure that the animations do not persist when they shouldn't helping prevent potential memory leaks or unwanted behaviors now we can go ahead and Define the timeline and we can use this by creating a variable called T1 and then calling gap. timeline now the timeline in the provided code is a gap mechanism that allows for the creation of a sequence of animations which can be controlled as a whole the benefit of using a timeline is that it simplifies the process of creating complex sequences without dealing with a bunch of individual animation timings now it's time to add sequences to our timeline looking at look at what we want to achieve we know that there are five things that we want to animate first is the white slider that comes across the screen and then off the screen then we have our three text messages software engineer designer and freelancer and then finally we have the welcome message once the slide is finished so for our animations these are going to be our reference points so let's go ahead and start adding them in and the way we can do that is by using the ID and then referring to the ID for each of the elements that we want to refer to but before we can start animating these elements we first need to add in our scope so if you remember our comp that we created using the US ref all we have to do now is just plug that in to our parent element or the parent of the children that we want to animate and then we can get started the these animations to work there are two functions that we need to be aware of first one is from now the from function animates properties from the values you define to whatever they currently are so if you want an element to start from an opacity of zero and animate to its current opacity let's say one you would use from we then also have the two function which animates properties from their current values to the values you define if you want an element to animate from its current opacity let's say one to an opacity of zero you would use two using that knowledge we can go ahead and Define our intro slider animation so as that's going to be the first animation we can say that we want it to go from minus 100 on the x-axis so as a percentage and we want the duration to be 1.3 seconds and we'll give it a delay of 0.3 that way it doesn't start the moment we load the page next we want to animate the titles which we know they come one after the other so we can group them in an array based on the IDS that we give to them using the from function we can say that we want them to come from an opacity of zero and move up on the y- axis by 30 pixels and then stagger them by 0.5 seconds the Stagger property allows each animation in the array to have a slight Delay from one another creating a sequence staggered effect after the titles have been presented they will animate out we'll do the same thing here however this time we will use the two function the text opacity will go to zero and move down the y-axis we will also add a delay to this animation so that it doesn't start suddenly after they have all appeared finally we need to add the Stagger property so the titles disappear one after the other once that is done the slider will then move off the screen along the negative X AIS again we be use the two function and set the x% property to be minus 100 and the duration will be set to 1.3 [Music] seconds as for our final animation we want the welcome message to then fade up using the welcome ID that we created here we can use the from function and set the following properties to be AAC Z and duration .5 seconds and there we have it our nice website intro animation which you can now go ahead and use in your own projects if you enjoyed this video feel free to subscribe for more and leave a comment for what you would like to learn in the future stay healthy stay safe and I hope to see you in the next video

Channel: rithmic

Views: 14,296

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

Id: UjuLDdnp_VM

Length: 10min 59sec (659 seconds)

Published: Wed Nov 01 2023