How To Code Animations in React.js with Greensock (GSAP) | Part 1

in this episode we're gonna be adding animations to our create react app the animation library that we're gonna be using is gzip and it is a terrific JavaScript animation library that's used worldwide and create some of the best animations I've seen on the web I pull up two examples of what gee sap is capable of of course this comes back to how talented these designers and developers are but if you're using the same tools and you kind of learn how to use them properly you should be able to create the same effects so our first example is this website I found finding control Nesta org and it's got some of the best animations I've seen another one is a digital agency I believe is called bacilli or Basilico probably butchering it but really nice slick animations and you can see that they don't struggle to load now working with this library is fairly easy when just getting things set up but since we are using react you could also use frameworks built on top of reacts such as gas PJs or next years but there might need to be some additional configuration there now to get started what you want to do is you want to just do the quick start that create react app has so you want to run npx create react app my app is just a project name that you want to name it in our case we're just gonna name it react - G set and then go ahead and CD and see your application and run NPM start I'm gonna jump over to the next screen where we're gonna have our application boot it up so once you've ran NPM start it should just open up in your localhost 3,000 of a create react app or just a basic boilerplate that it has this first episode is just installing G SAP learning how it kind of works using tween max tween Max is a G set plug-in I should mention and if we go into the documentation and see if I could pull that up in products so you got G SAP which is the entire tool and then you've got inside you set such as tween max tween ly draggable morph SVG and so there's there's these other plugins within too GCF that you could use for your web app in our case we are just going to create a very simple animation of the react app logo and/or the react logo and the text kind of just fading in and sliding in nothing too complex just yet we just want to pick up the very basics and know how it kind of works especially when using react it might be a little different than just vanilla JavaScript now the first thing that you want to do is you won't need to install GCF so just go ahead and run npm install gzip and once that's installed you want to go ahead and import it into your project to import g s-- app you need to specify which plugin that you want so the plugin that we're going to be using is in fact tween max which is the most popular one and we're also going to import something called power three which is a type of easing within g set so we want to import these from g set now once those are imported we need to jump into the next topic which kind of uses react hooks so there's two hooks that we need to specify one is called use ref which allows us to reference whichever Dom element is in our little return life cycle or return cycle within the JSX code that we written or the one that provided by react so use ref gives us a reference to which Dom element we want now the second one is use effect but we'll get into that in just a second so let's go ahead and import use ref from react cool and what I'm gonna do now is just actually use this hook and then just console.log some code out just to show you how it works to use this hook what you need to do is let's go ahead and create a variable called in this case we'll just say logo icon and doesn't make any sense we'll just say a logo item for now and we'll use ref and first this just returns some text for now so let's just say hello or actually sorry about that just putting null this will in fact you know return a null or or nothing so if we go ahead and log this out it should return an object up no let's go ahead and check out the log console so it does return null if we go and refresh that it it's gonna say the same thing if we change this to a string LLL return hello let's go ahead and refresh oh I sorry I'm returning null here oh that's embarrassing uh-hum logo item not no it does return the current of hello and if we put this to no now it should return an object as current no now what we need to do is reference the image so that it does pick up that our logo item variable is in fact this image here and the way to do that is go ahead and add a ref attribute and in here let's return a function that will set this image item as our logo item and to do that let's go ahead and run elf for element it could be anything you want you could even name it logo or logo item or whatever you want but I'm gonna go ahead and select L to be short for elements so let's go to logo item and set it to L this will tell us that L is equal to logo item which should be here now we can see that it's still returning returning current no and the reason that is is we it's logging the logo item as know before the Dom elements have loaded so this is running before any of these items now the solution to that is our next hook we're gonna explore which is the user effect took which is kind of like the previous lifecycle that react out of like component did mount so this will run when the Dom elements have completely loaded or or mounted and in here go ahead and let's just do an anonymous function and let's see if it actually works so let's go ahead and console.log logo item what you can also add is certain dependencies but in this case we're just gonna go ahead and leave it empty array so if we go ahead and save this what it should render first is let me add console.log outside of the user effect also so that I can kind of explain what should happen is the logo item first console.log should return null and the second one after the use effect is ran which is after every single Dom elements loaded it should return our image object so if we go ahead and save this so the first console.log is no which is correct and the second one is in fact our image item what we could also do in here just to show you that we are actually targeting this image is let's go ahead and do logo item dot style I'm just gonna I'm just gonna hide it with like CSS so display can't even spill and let's just set that to none well this will do is just display:none our item so it should just disappear perfect just like that we are targeting items in our create react app application once we actually have our item what we could do next is add those animations so let's go ahead and remove the console.log and let's add the animation that we want what we want our animation to look like is just kind of fade in and move up a bit and to do that we can add tween max dot two and inside these parentheses I love vs code because it pretty much tells us what's going on it tells us the target that we want in our case we'll just list out the variable name the duration which is a type of number they need to put and then certain bars or kind of like options we could list such as delay opacity scale and and additional properties that gee sell out so the first thing we need to list is that local item so let's go ahead and do that the next thing is the duration so we'll set point eight and the last one and the last one is our options that we need to add so we'll set the opacity to 100 this is getting in the way now can I just okay well set the opacity to one will add a why of negative 20 and the last thing we need to add is our ease so that's where we're gonna pull on that power three and just add ease out cool go ahead and save that and if we reload nothing actually happens because our item is already at the opacity of one so let's jump into the CSS and add opacity of zero and let's in fact remove this three spinning animation also a strip of that so add opacity of zero if we save that and refresh here you can actually see that it's just fading in there and if we remove the spending animation we can see that the actual image item is going up a bit and then fading in which is really cool so that's kind of it for creating very basic animations what we could do next is just replicate this for our paragraph text so to follow those exact same steps we need to create a new variable and in this case we'll just call it text item and we'll use ref and set that to null as well and so what we need to do is in our P tag at a ref attribute this same exact thing that we did earlier now we can also copy the animation that we created earlier switch out the logo item or text item and let's actually add one more thing let's add a delay of point to go ahead and save that and now you can see every time we refresh it doesn't look good so let's go ahead and in this case of course you'll have a lot more organized way of doing things but I'm just gonna set the opacity to zero so that it actually looks semi-decent but you can see that the animation for the tween max for the logo item runs and then second 0.2 second delay after the page is loaded or this animations finished the next one would start and so this isn't really the perfect way of creating this sort of timeline you do want to use timeline max which we will get into in the later tutorials but this first episode was just highlighting how to actually import jisse app and create a very simple animation for when our page loads in the next episode we're hopefully gonna create a lot more complex animations and discover the different plugins within G SAP if you've enjoyed this video go ahead and leave a light down below and make sure you hit that subscribe button thanks again for tuning in have a wonderful

Channel: Wrong Akram

Views: 64,713

Keywords: Javascript, React, React.js, GSAP, Greensock, Animation, Js animations, web animations, gsap animations, code

Id: _-YfoAzIDzw

Length: 11min 38sec (698 seconds)

Published: Fri Aug 02 2019