[00:00:02] Hi welcome back to the reactor cores in the last guide we set up our description to open and close. And this guy we're going to make it so we can animate this open. So to get started. Head over to NPM gas dot com slash package slash react Hanami high and this will be in the guide notes below so you can just click out if you want and you don't even have to come here you can just read us so we have to install it to type in npm install Darsh gnashed save reac enemy hide in our terminal. You can just copy and paste on NPR and installed that stuff save report enemy. Okay so while it's installing LETS GO I read on here how this works. So looks like they have me here. Hi interation 500 hi hi so it says your content goes here. Put as many reactor HGL components here so let's go and just copy this right here. With copy this entire thing right here because it looks like I thought we need to remember to import enemy. Hi premire react anime. So we want to make light of this so let's go ahead and import import Ammi from react. Hey I believe that's what it's called it's Chuck. Yeah that's what it's called. Okay. Now let's go ahead and wrap our description around this. Let's get rid of this. So we are going to be high and let's just throw this in here. So they're not really clear about what hied is supposed to be. So let's see what they put away so they are right here. [00:02:08][126.0]
[00:02:08] Pretty clear about it. High numeric percentage value. So 50 percent Harto duration. Okay so let's go out and most just put a duration of 500 milliseconds over half a second. And then once determine the height based off of whether or not the course is open. So for just a start let's put in auto Amlin suit. That gets us. I think that's just going to make it so nothing changes or it might animate and actually can nothing. Let's say 0 so your Hobbins Case 0 stands 0. So we need this to change based on whether or not the content is shining and then we can get rid of show content content so we can actually just copy this cut it out and we can throw it here and then instead of we don't need the string interpolation instead of shogunate content. Let's just put it in Hayato and zero it's odd and it's going to be audio or zero pixels. Hi awesomes. That works fantastic. Looks like it's taking a little bit longer than we'd like it to be. We'll see if it works I can hear. So it's a little quicker. You can do whatever you want. I'm going to put 300 NZL Outlook's ok cool. Looks great. Now that's going to be for this guide in the next guy. Let's go ahead and make the arrow here and see ISIS. And then if we have time we will animate as well so I will see in the next guy. [00:04:15][127.5]
[253.5]

NPM Height package
https://www.npmjs.com/package/react-animate-height

Animatiton starter code:

Your content goes here
Put as many React or HTML components here.